我正在尝试在文件输入更改时运行upload()
函数。但是,我无法使其发挥作用。
HTML:
<input type="file" ng-model="image" ng-change="uploadImage()">
JS:
$scope.uploadImage = function() {
console.log('Changed');
}
我做错了什么?
答案 0 :(得分:48)
<强> JS: - 强>
function myCtrl($scope) {
$scope.uploadImage = function () {
console.log("Changed");
}
}
<强> HTML: - 强>
<div ng-app ng-controller="myCtrl">
<input type="file" ng-model="image" onchange="angular.element(this).scope().uploadImage()" />
</div>
答案 1 :(得分:35)
这是我制定的指令,可以完成您的要求。如果我没有弄错的话,我认为其他解决方案在生产模式下不起作用,但是这个解决方案确实如此。它的用法如下:
<input ng-upload-change="fileChanged($event)" />
在您的控制器中:
$scope.fileChanged = function($event){
var files = $event.target.files;
}
并且指令包含在代码中的某处:
angular.module("YOUR_APP_NAME").directive("ngUploadChange",function(){
return{
scope:{
ngUploadChange:"&"
},
link:function($scope, $element, $attrs){
$element.on("change",function(event){
$scope.$apply(function(){
$scope.ngUploadChange({$event: event})
})
})
$scope.$on("$destroy",function(){
$element.off();
});
}
}
});
此代码已发布到公共域,无需归属。
您还应该知道,如果有人选择文件,关闭文件输入,然后稍后再次选择同一文件,则不会再次触发更改功能。为了解决这个问题,我创建了一个更完整的指令,每次使用它时都会替换引擎盖下的输入。我把它放在github这里:
答案 2 :(得分:2)
监听文件输入更改的另一个有趣方法是监视输入文件的ng-model属性。
像这样:
HTML - &gt; <input type="file" file-model="change.fnEvidence">
JS代码 - &gt;
$scope.$watch('change.fnEvidence', function() {
alert("has changed");
});
希望它可以帮助某人。
答案 3 :(得分:-2)
使用ng-file-select =&#34;上传($ files)&#34;
'<input type="file" class="form-control" ng-model="alunos.file" accept="image/*" ng-file-select="upload($files)"/>'
上传是一个功能:$scope.upload = function(file){
console.log(file);
};