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

发布时间：2020-12-17 09:24:32 所属栏目：安全来源：网络整理

导读：我是新的角。我试图读取从HTML’文件’字段上传的文件路径，只要此字段发生“更改”。如果我使用’onChange’它的工作，但是当我使用它的角度方式使用’ng-change’它不工作。 script var DemoModule = angular.module("Demo",[]); DemoModule .controller("

我是新的角。我试图读取从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也不会显示任何错误。

无文件上传控件的绑定支持

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()" />

Note: this requires the angular application to always be in 07001. This will not work in production code if debug mode is disabled.

并在您的功能更改
代替

$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 – 用于使用iframe上传文件的AngularJS服务

http://ngmodules.org/modules/ngUpload

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!