AngularJs:如何检查文件输入字段中的更改? [英] AngularJs: How to check for changes in file input fields?

问题描述

我是 angular 的新手.每当此字段发生更改"时，我都会尝试从 HTML文件"字段读取上传的文件路径.如果我使用onChange"它会起作用，但是当我使用ng-change"以角度方式使用它时它不起作用.

<div ng-controller="form-cntlr"><表格><button ng-click="selectFile()">上传您的文件</button><input type="file" style="display:none"id="file" name='file' ng-Change="fileNameChaged()"/></表单>

fileNameChaged() 从不调用.Firebug 也没有显示任何错误.

解决方案

文件上传控件不支持绑定

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

<表格><button ng-click="selectFile()">上传您的文件</button><input type="file" style="display:none"id="file" name='file' onchange="angular.element(this).scope().fileNameChanged(this)"/></表单>

代替

你可以试试吗

<块引用>

注意:这要求 Angular 应用程序始终处于调试模式.如果禁用调试模式，这在生产代码中将不起作用.

并在您的功能更改中而不是

$scope.fileNameChanged = function() {alert("选择文件");}

你可以试试吗

$scope.fileNameChanged = function() {console.log("选择文件");}

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

Angular 文件上传信息

用于在 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

I am new to angular. I am trying to read the uploaded file path from HTML 'file' field whenever a 'change' happens on this field. If i use 'onChange' it works but when i use it angular way using 'ng-change' it doesn't work.

<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() is never calling. Firebug also doesn't show any error.

解决方案

No binding support for File Upload control

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>

instead of

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

can you try

<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 debug mode. This will not work in production code if debug mode is disabled.

and in your function changes instead of

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

can you try

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

Below is one working example of file upload with drag drop file upload may be helpful http://jsfiddle.net/danielzen/utp7j/

Angular File Upload Information

URL for AngularJS File Upload in ASP.Net

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

AngularJs native multi-file upload with progress with NodeJS

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

ngUpload - An AngularJS Service for uploading files using iframe

http://ngmodules.org/modules/ngUpload

这篇关于AngularJs:如何检查文件输入字段中的更改?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！