使用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，即FileReaderHTML非常简单：<input&nbsp;type="file"&nbsp;id="file"&nbsp;name="file"/><button&nbsp;ng-click="add()">Add</button>在控制器中定义‘Add’方法：$scope.add&nbsp;=&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;f&nbsp;=&nbsp;document.getElementById('file').files[0], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;r&nbsp;=&nbsp;new&nbsp;FileReader(); &nbsp;&nbsp;&nbsp;&nbsp;r.onloadend&nbsp;=&nbsp;function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;data&nbsp;=&nbsp;e.target.result; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//send&nbsp;your&nbsp;binary&nbsp;data&nbsp;via&nbsp;$http&nbsp;or&nbsp;$resource&nbsp;or&nbsp;do&nbsp;anything&nbsp;else&nbsp;with&nbsp;it &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;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()应该用它代替。