文件与JS角挑 [英] File pick with Angular JS

问题描述

我想拿起用AngularJS的文件：

I would like to pick up a file with AngularJS:

HTML

<div ng-controller="TopMenuCtrl">
    <button class="btn" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
    <input type="file" ng-model="filepick" ng-change="pickimg()" multiple />
    <output id="list"></output> 
</div>

JavaScript的：

javascript:

angular.module('plunker', ['ui.bootstrap']);
function TopMenuCtrl($scope) {
    $scope.pickimg = function() {
        alert('a');
    };
}

我如何可以将绑定在AngularJS输入文件的onchange 行动 pickimg 功能？
我怎么能操纵后上传的文件？

How can I bind the input file onchange action on the AngularJS pickimg function? And how can i manipulate the files uploaded after?

推荐答案

角还不支持 NG-更改对于输入[type = file] 让你拥有给自己推出的onchange实施。

Angular doesn't yet support ng-change for input[type=file] so you have to roll onchange implementation yourself.

首先，在HTML中，定义的JavaScript的onchange如下：

First, in the HTML, define Javascript for onchange as follows:

<input ng-model="photo"
       onchange="angular.element(this).scope().file_changed(this)"
       type="file" accept="image/*" />

然后在你的角度控制器code，定义函数：

And then in your Angular controller code, define the function:

$scope.file_changed = function(element) {

     $scope.$apply(function(scope) {
         var photofile = element.files[0];
         var reader = new FileReader();
         reader.onload = function(e) {
            // handle onload
         };
         reader.readAsDataURL(photofile);
     });
};

这篇关于文件与JS角挑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！