我是角的新手。我试图从HTML“文件”字段读取上传的文件路径,每当“更改”发生在这个字段上。如果我使用“onChange”,它可以工作,但当我以angular的方式使用“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也不会显示任何错误。


当前回答

我做了一个小指令来监听文件输入的变化。

View JSFiddle

view.html:

<input type="file" custom-on-change="uploadFile">

controller.js:

app.controller('myCtrl', function($scope){
    $scope.uploadFile = function(event){
        var files = event.target.files;
    };
});     

directive.js:

app.directive('customOnChange', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var onChangeHandler = scope.$eval(attrs.customOnChange);
      element.on('change', onChangeHandler);
      element.on('$destroy', function() {
        element.off();
      });

    }
  };
});

其他回答

最简单的Angular jqLite版本。

JS:

.directive('cOnChange', function() {
    'use strict';

    return {
        restrict: "A",
        scope : {
            cOnChange: '&'
        },
        link: function (scope, element) {
            element.on('change', function () {
                scope.cOnChange();
        });
        }
    };
});

HTML:

<input type="file" data-c-on-change="your.functionName()">

没有文件上传控件的绑定支持

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/

Angular文件上传信息

在ASP中上传AngularJS文件的URL。网

https://github.com/geersch/AngularJSFileUpload

AngularJs原生多文件上传与NodeJS的进展

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

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

http://ngmodules.org/modules/ngUpload

监听文件输入更改的另一种有趣方法是监视输入文件的ng-model属性。当然,FileModel是一个自定义指令。

是这样的:

> -> <input type="file" file-model="change.fnEvidence

JS代码->

$scope.$watch('change.fnEvidence', function() {
                    alert("has changed");
                });

希望它能帮助到一些人。

您可以简单地在onchange中添加以下代码,它将检测更改。你可以写一个函数在X点击或删除文件数据。

document.getElementById(id).value = "";

太完整的解决方案基于:

`onchange="angular.element(this).scope().UpLoadFile(this.files)"`

隐藏输入字段并将其替换为图像的简单方法,在解决方案之后,这也需要对angular进行hack,但可以完成工作[TriggerEvent不像预期的那样工作]

解决方案:

将输入字段放入display:none[输入字段存在于DOM中但不可见] 把你的图片放在后面 在映像上使用nb-click()激活一个方法

当图像被点击时,在输入字段上模拟一个DOM动作“点击”。果不其然!

 var tmpl = '<input type="file" id="{{name}}-filein"' + 
             'onchange="angular.element(this).scope().UpLoadFile(this.files)"' +
             ' multiple accept="{{mime}}/*" style="display:none" placeholder="{{placeholder}}">'+
             ' <img id="{{name}}-img" src="{{icon}}" ng-click="clicked()">' +
             '';
   // Image was clicked let's simulate an input (file) click
   scope.inputElem = elem.find('input'); // find input in directive
   scope.clicked = function () {
         console.log ('Image clicked');
         scope.inputElem[0].click(); // Warning Angular TriggerEvent does not work!!!
    };