Javascript 如何使用fileModel | | input type="；文件"；

当有“更改”时，如何触发ng更改

我对此使用自定义文件指令

指令：

app.directive('ngFileModel', ['$parse', function($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.ngFileModel);
            var isMultiple = attrs.multiple;
            var modelSetter = model.assign;
            element.bind('change', function() {
                var values = [];
                angular.forEach(element[0].files, function(item) {
                    var value = {
                        // File Name 
                        name: item.name,
                        //File Size 
                        size: item.size,
                        //File URL to view 
                        url: URL.createObjectURL(item),
                        // File Input Value 
                        _file: item
                    };
                    values.push(value);
                });
                scope.$apply(function() {
                    if (isMultiple) {
                        modelSetter(scope, values);
                    } else {
                        modelSetter(scope, values[0]);
                    }
                });
            });
        }
    };
}]);

如何在不使用ng模型的情况下使用ng change

HTML:

指令获取使用

ng型号输入的文件
此指令使
能够自动使用
ng change
和
ng form
指令

AngularJS内置的
指令不处理
。这需要一个自定义指令

<input type="file" files-input ng-model="fileArray"
       ng-change="onFileSelect()" multiple />

上述指令添加了一个更改侦听器，该侦听器使用
input
元素的files属性更新模型



文件输入指令的内联演示

angular.module（“app”，[]）；
angular.module（“app”）指令（“fileInput”，function（）{
返回{
要求：“ngModel”，
链接：功能后链接（范围、元素、属性、ngModel）{
要素开启（“变更”，功能（e）{
var files=elem[0]。文件；
ngModel.$setViewValue（文件）；
})
}
}
});

AngularJS输入`type=file`Demo
文件夹
{{file.name}
使用$broadcast&$on，而不是ng change create custom event&从指令内部触发它。如果可以更改指令实现的逻辑，请检查以下内容：
<input type="file" files-input ng-model="fileArray"
       ng-change="onFileSelect()" multiple />

angular.module("app").directive("filesInput", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
})