且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

NG-模型<输入类型="文件" />

更新时间:2022-11-30 10:40:00

我创建了一个指令解决方法:

I created a workaround with directive:

.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    scope.$apply(function () {
                        scope.fileread = loadEvent.target.result;
                    });
                }
                reader.readAsDataURL(changeEvent.target.files[0]);
            });
        }
    }
}]);

和input标签就变成​​了:

And the input tag becomes:

<input type="file" fileread="vm.uploadme" />

或者,如果需要的不仅仅是文件定义:

Or if just the file definition is needed:

.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                scope.$apply(function () {
                    scope.fileread = changeEvent.target.files[0];
                    // or all selected files:
                    // scope.fileread = changeEvent.target.files;
                });
            });
        }
    }
}]);