使用 AngularJS 上传文件 [英] File Upload using AngularJS
问题描述
这是我的 HTML 表单:
Here is my HTML form:
<form name="myForm" ng-submit="">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>
我想从本地机器上传图片,并想读取上传文件的内容.所有这些我都想使用 AngularJS 来完成.
I want to upload an image from local machine and want to read the content of the uploaded file. All this I want to do using AngularJS.
当我尝试打印 $scope.file
的值时,它是未定义的.
When I try to print the value of $scope.file
it comes as undefined.
推荐答案
这里的一些答案建议使用 FormData()
,但不幸的是,该浏览器对象在 Internet Explorer 9 及更低版本中不可用.如果您需要支持那些较旧的浏览器,则需要一个备份策略,例如使用 或 Flash.
Some of the answers here propose using FormData()
, but unfortunately that is a browser object not available in Internet Explorer 9 and below. If you need to support those older browsers, you will need a backup strategy such as using <iframe>
or Flash.
已经有很多 Angular.js 模块来执行文件上传.这两个明确支持旧版浏览器:
There are already many Angular.js modules to perform file uploading. These two have explicit support for older browsers:
- https://github.com/leon/angular-upload - 使用 iframe 作为后备
- https://github.com/danialfarid/ng-file-upload - 使用 FileAPI/Flash 作为回退
- https://github.com/leon/angular-upload - uses iframes as a fallback
- https://github.com/danialfarid/ng-file-upload - uses FileAPI/Flash as a fallback
还有其他一些选择:
- https://github.com/nervgh/angular-file-upload/
- https://github.com/uor/angular-file
- https://github.com/twilson63/ngUpload
- https://github.com/uploadcare/angular-uploadcare
其中一个应该适合您的项目,或者可以让您深入了解如何自己编写代码.
One of these should fit your project, or may give you some insight into how to code it yourself.
这篇关于使用 AngularJS 上传文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!