使用AngularJS上传文件

这里是我的HTML表格。

<form name="myForm" ng-submit="">
    <input ng-model='file' type="file"/>
    <input type="submit" value='Submit'/>
</form>

我想从本地机器上传一张图片，并想读取上传文件的内容。所有这些我都想用AngularJS来完成。

当我试图打印$scope.file的值时，它显示为未定义。

georgeawg
已编辑的问题 11日 六月 2018 в 2:13
编程
angularjs angularjs-fileupload
2日 九月 2013 в 10:29
33 种观点
解决办法

这里的一些答案建议使用FormData()，但不幸的是，这是一个浏览器对象，在Internet Explorer 9及以下版本中无法使用。如果你需要支持这些旧的浏览器，你将需要一个备份策略，如使用<iframe>或Flash。

已经有许多Angular.js模块来执行文件上传。 这两个模块对旧的浏览器有明确的支持。

还有一些其他选项。

其中一个应该适合你的项目，或者可能给你一些关于如何自己编码的见解。

Anoyz
编辑本段答案22日 十二月 2015 в 11:20
评论(8)

以下是文件上传的工作实例。

http://jsfiddle.net/vishalvasani/4hqVu/

在这个例子中，有一个函数叫做

setFiles

从视图开始，它将更新控制器中的文件阵列

或

你可以查看使用AngularJS的jQuery文件上传

http://blueimp.github.io/jQuery-File-Upload/angularjs.html

评论(7)

[http://jsfiddle.net/vishalvasani/4hqVu/](http://jsfiddle.net/vishalvasani/4hqVu/)在chrome和IE中工作正常（如果你在background-image中稍微更新一下CSS）。 这是用来更新进度条的。

 scope.progress = Math.round(evt.loaded * 100 / evt.total)

但在FireFox中，angular'的[percent]数据没有在DOM中成功更新，尽管文件已经成功上传。

评论(7)