如何检查文件输入字段的变化?

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

当前回答

Angular的元素(比如指令的根元素)都是jQuery [Lite]对象。这意味着我们可以像这样注册事件监听器:

link($scope, $el) {
    const fileInputSelector = '.my-file-input'

    function setFile() {
        // access file via $el.find(fileInputSelector).get(0).files[0]
    }

    $el.on('change', fileInputSelector, setFile)
}

这是jQuery事件委托。在这里，监听器附加到指令的根元素。当事件被触发时，它将弹出到已注册的元素，jQuery将确定事件是否起源于匹配已定义选择器的内部元素。如果是，处理程序将触发。

这种方法的好处是:

处理程序被绑定到$元素，当指令作用域被销毁时，$元素将被自动清除。模板中没有代码即使在你注册事件处理程序(比如使用ng-if或ng-switch)时，目标委托(输入)还没有呈现也会工作

http://api.jquery.com/on/

2017-09-08 00:34:20

其他回答

我这样做过;

<!-- HTML -->
<button id="uploadFileButton" class="btn btn-info" ng-click="vm.upload()">    
<span  class="fa fa-paperclip"></span></button>
<input type="file" id="txtUploadFile" name="fileInput" style="display: none;" />

// self is the instance of $scope or this
self.upload = function () {
   var ctrl = angular.element("#txtUploadFile");
   ctrl.on('change', fileNameChanged);
   ctrl.click();
}

function fileNameChanged(e) {
    console.log(self.currentItem);
    alert("select file");
}

2016-02-10 10:10:41

太完整的解决方案基于:

`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!!!
    };

2015-12-13 20:29:47

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

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

2013-07-29 12:03:25

使用ng-change1的“files-input”指令的工作演示

要使<input type=file>元素使用ng-change指令，它需要一个使用ng-model指令的自定义指令。

<input type="file" files-input ng-model="fileList" 
       ng-change="onInputChange()" multiple />

演示

angular.module("app",[]) .directive("filesInput", function() { return { require: "ngModel", link: function postLink(scope,elem,attrs,ngModel) { elem.on("change", function(e) { var files = elem[0].files; ngModel.$setViewValue(files); }) } } }) .controller("ctrl", function($scope) { $scope.onInputChange = function() { console.log("input change"); }; }) <script src="//unpkg.com/angular/angular.js"></script> <body ng-app="app" ng-controller="ctrl"> <h1>AngularJS Input `type=file` Demo</h1> <input type="file" files-input ng-model="fileList" ng-change="onInputChange()" multiple /> <h2>Files</h2> <div ng-repeat="file in fileList"> {{file.name}} </div> </body>

2017-08-30 17:35:34

简单的方法是编写自己的指令绑定到“change”事件。只是让你们知道IE9不支持FormData所以你不能从change事件中得到file对象。

你可以使用ng-file-upload库，它已经支持IE的FileAPI polyfill，并简化了将文件发布到服务器的过程。它使用一个指令来实现这一点。

<script src="angular.min.js"></script>
<script src="ng-file-upload.js"></script>

<div ng-controller="MyCtrl">
  <input type="file" ngf-select="onFileSelect($files)" multiple>
</div>

JS:

//inject angular file upload directive.
angular.module('myApp', ['ngFileUpload']);

var MyCtrl = [ '$scope', 'Upload', function($scope, Upload) {
  $scope.onFileSelect = function($files) {
    //$files: an array of files selected, each file has name, size, and type.
    for (var i = 0; i < $files.length; i++) {
      var $file = $files[i];
      Upload.upload({
        url: 'my/upload/url',
        data: {file: $file}
      }).then(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
      }); 
    }
  }
}];

2013-08-24 17:01:08

如何检查文件输入字段的变化?

推荐文章

最新文章

标签