AngularJs：如何检查文件输入字段的变化？ [英] AngularJs: How to check for changes in file input fields?

问题描述

我是新来的角。我想只要'变'发生在这一领域的读取HTML'文件字段上传的文件路径。如果我使用'的onChange它的工作原理，但是当我使用'NG-变化用它的角方式，它不工作。

＆LT;脚本＆GT;
   VAR DemoModule = angular.module（演示，[]）;
   DemoModule .controller（表单cntlr功能（$范围）{
   $ scope.selectFile =功能（）
   {
        $（＃文件），点击（）。
   }
   $ scope.fileNameChaged =功能（）
   {
        警报（选择文件）;
   }
}）;
＆LT; / SCRIPT＆GT;＆LT; D​​IV NG控制器=表单cntlr＆GT;
    ＆LT;形式为GT;
         ＆LT;按钮NG点击=选择文件（）＆GT;上传您的文件＆LT; /按钮＆GT;
         ＆LT;输入类型=文件的风格=显示：无
                          ID =文件名称='文件'NG-涨跌=fileNameChaged（）/＆GT;
    ＆LT; /表及GT;
＆LT; / DIV＆GT;


fileNameChaged（）从不打电话。萤火也没有显示任何错误。

解决方案

有关文件上载控件没有绑定支持

<一个href=\"https://github.com/angular/angular.js/issues/1375\">https://github.com/angular/angular.js/issues/1375

 ＆LT; D​​IV NG控制器=表单cntlr＆GT;
        ＆LT;形式为GT;
             ＆LT;按钮NG点击=选择文件（）＆GT;上传您的文件＆LT; /按钮＆GT;
             ＆LT;输入类型=文件的风格=显示：无
                ID =文件名称='文件'的onchange =angular.element（本）.scope（）fileNameChanged（本）。/＆GT;
        ＆LT; /表及GT;
    ＆LT; / DIV＆GT;
 

而不是

 ＆LT;输入类型=文件的风格=显示：无
    ID =文件名称='文件'NG-涨跌=fileNameChanged（）/＆GT;
 

您可以尝试

 ＆LT;输入类型=文件的风格=显示：无
    ID =文件名称='文件'的onchange =angular.element（本）.scope（）fileNameChanged（）。/＆GT;
 

  

请注意：这需要的角度应用程序始终在调试模式。如果调试模式被禁止，这将不起作用在生产code。

和你的功能变化
而不是

  $ scope.fileNameChanged =功能（）{
   警报（选择文件）;
}
 

您可以尝试

  $ scope.fileNameChanged =功能（）{
  的console.log（选择文件）;
}
 

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

角文件上传信息

在ASP.Net网址为AngularJS文件上传

<一个href=\"http://cgeers.com/2013/05/03/angularjs-file-upload/\">http://cgeers.com/2013/05/03/angularjs-file-upload/

AngularJs本地多文件上传与进步的NodeJS

<一个href=\"http://jasonturim.word$p$pss.com/2013/09/12/angularjs-native-multi-file-upload-with-progress/\">http://jasonturim.word$p$pss.com/2013/09/12/angularjs-native-multi-file-upload-with-progress/

ngUpload - 一个AngularJS服务上传使用iframe的文件

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屋！