AngularJs：如何检查文件输入字段中的更改？

Question

我是新手。每当此字段发生“更改”时，我都试图从HTML“文件”字段中读取上载的文件路径。如果我使用“ onChange”，则可以使用，但是当我使用“ ng-
change”以角度的方式使用时，则无法使用。

<script>
   var DemoModule = angular.module("Demo",[]);
   DemoModule .controller("form-cntlr",function($scope){
   $scope.selectFile = function()
   {
        $("#file").click();
   }
   $scope.fileNameChaged = function()
   {
        alert("select file");
   }
});
</script>

<div ng-controller="form-cntlr">
    <form>
         <button ng-click="selectFile()">Upload Your File</button>
         <input type="file" style="display:none" 
                          id="file" name='file' ng-Change="fileNameChaged()"/>
    </form>  
</div>

fileNameChaged（） 从不调用。Firebug也不会显示任何错误。

Answer 1

不支持文件上传控件

https://github.com/angular/angular.js/issues/1375

<div ng-controller="form-cntlr">
        <form>
             <button ng-click="selectFile()">Upload Your File</button>
             <input type="file" style="display:none" 
                id="file" name='file' onchange="angular.element(this).scope().fileNameChanged(this)" />
        </form>  
    </div>

代替

 <input type="file" style="display:none" 
    id="file" name='file' ng-Change="fileNameChanged()" />

你能试一下吗

<input type="file" style="display:none" 
    id="file" name='file' onchange="angular.element(this).scope().fileNameChanged()" />

注意：这要求Angular应用程序始终处于调试模式。如果禁用了调试模式，则此功能在生产代码中将不起作用。

并且在您的功能中进行更改，而不是

$scope.fileNameChanged = function() {
   alert("select file");
}

你能试一下吗

$scope.fileNameChanged = function() {
  console.log("select file");
}

以下是文件上传的一个工作示例，其中拖放文件上传可能会有所帮助
http://jsfiddle.net/danielzen/utp7j/

角度文件上传信息

ASP.Net中AngularJS文件上传的URL

http://cgeers.com/2013/05/03/angularjs-file-
upload/

AngularJs本机多文件上传以及NodeJS的进展

http://jasonturim.wordpress.com/2013/09/12/angularjs-native-multi-file-
upload-with-progress/

ngUpload-AngularJS服务，用于使用iframe上传文件

http://ngmodules.org/modules/ngUpload