使用AngularJS上传文件

Question

使用AngularJS上传文件以下是我的HTML表单：<form name="myForm" ng-submit="">     <input ng-model='file' type="file"/>     <input type="submit" value='Submit'/></form>我想从本地机器上传一个图像，并希望读取上传文件的内容。所有这些我都想用AngularJS来做。当我试图打印$scope.file这是个未知数。

Answer 1

最简单的方法是使用HTML 5 API，即FileReader

HTML非常简单：

<input type="file" id="file" name="file"/><button ng-click="add()">Add</button>

在控制器中定义‘Add’方法：

$scope.add = function() {
    var f = document.getElementById('file').files[0],
        r = new FileReader();

    r.onloadend = function(e) {
      var data = e.target.result;
      //send your binary data via $http or $resource or do anything else with it
    }

    r.readAsBinaryString(f);}

浏览器兼容性

桌面浏览器

Firefox(壁虎)3.6(1.9.2)，Chrome 7，Internet Explorer*10，Opera*12.02，Safari 6.0.2

移动浏览器

Firefox(壁虎)32，Chrome 3，InternetExplorer*10，Opera*11.5，Safari 6.1

注意：readAsBinaryString()方法被废弃，并且readAsArrayBuffer()应该用它代替。