使用AngularJS上传文件

本文翻译自：File Upload using AngularJS

Here is my HTML form: 这是我的HTML表单：

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

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. 我想使用AngularJS进行的所有操作。

When I try to print the value of $scope.file it comes as undefined. 当我尝试打印$scope.file的值时，它的值未定义。

#1楼

参考：https://stackoom.com/question/1FvAH/使用AngularJS上传文件

#2楼

Below is working example of file upload: 以下是文件上传的工作示例：

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

In this one function called 在这个函数中，

setFiles

From View which will update the file array in controller 从视图将更新控制器中的文件数组

or 要么

You can check jQuery File Upload using AngularJS 您可以使用AngularJS检查jQuery文件上传

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

#3楼

http://jsfiddle.net/vishalvasani/4hqVu/ works fine in chrome and IE (if you update CSS a little in background-image). http://jsfiddle.net/vishalvasani/4hqVu/在chrome和IE中工作正常（如果您在背景图片中稍微更新了CSS）。 This is used for updating progress bar: 这用于更新进度条：

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

but in FireFox angular's [percent] data is not updated in DOM successfully,although files are uploading successfully. 但是在FireFox中，虽然文件上传成功，但是在DOM中无法成功更新angular的[percent]数据。

#4楼

Some of the answers here propose using FormData() , but unfortunately that is a browser object not available in Internet Explorer 9 and below. 这里的一些答案建议使用FormData() ，但是不幸的是，这是Internet Explorer 9及更低版本中不可用的浏览器对象。 If you need to support those older browsers, you will need a backup strategy such as using <iframe> or Flash. 如果需要支持那些较旧的浏览器，则需要一种备份策略，例如使用<iframe>或Flash。

There are already many Angular.js modules to perform file uploading. 已经有许多Angular.js模块可以执行文件上传。 These two have explicit support for older browsers: 这两个对较旧的浏览器有明确的支持：

https://github.com/leon/angular-upload - uses iframes as a fallback https://github.com/leon/angular-upload-使用iframe作为后备广告
https://github.com/danialfarid/ng-file-upload - uses FileAPI/Flash as a fallback https://github.com/danialfarid/ng-file-upload-使用FileAPI / Flash作为后备

And some other options: 还有其他一些选择：

https://github.com/nervgh/angular-file-upload/ https://github.com/nervgh/angular-file-upload/
https://github.com/uor/angular-file https://github.com/uor/angular-file
https://github.com/twilson63/ngUpload https://github.com/twilson63/ng上传
https://github.com/uploadcare/angular-uploadcare 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. 其中之一应适合您的项目，或者可以使您对如何自己编写代码有所了解。

#5楼

The easiest is to use HTML5 API, namely FileReader 最简单的是使用HTML5 API，即FileReader

HTML is pretty straightforward: HTML非常简单：

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

In your controller define 'add' method: 在您的控制器中定义“添加”方法：

$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);
}

Browser Compatibility 浏览器兼容性

Desktop Browsers 桌面浏览器

Edge 12, Firefox(Gecko) 3.6(1.9.2), Chrome 7, Opera* 12.02, Safari 6.0.2 Edge 12，Firefox（Gecko）3.6（1.9.2），Chrome 7，Opera * 12.02，Safari 6.0.2

Mobile Browsers 移动浏览器

Firefox(Gecko) 32, Chrome 3, Opera* 11.5, Safari 6.1 Firefox（壁虎）32，Chrome 3，Opera * 11.5，Safari 6.1

Note : readAsBinaryString() method is deprecated and readAsArrayBuffer() should be used instead. 注意：不建议使用readAsBinaryString（）方法，而应使用readAsArrayBuffer（）。

#6楼

You can achieve nice file and folder upload using flow.js . 您可以使用flow.js实现漂亮的文件和文件夹上传。

https://github.com/flowjs/ng-flow https://github.com/flowjs/ng-flow

Check out a demo here 在这里查看演示

http://flowjs.github.io/ng-flow/ http://flowjs.github.io/ng-flow/

It doesn't support IE7, IE8, IE9, so you'll eventually have to use a compatibility layer 它不支持IE7，IE8，IE9，因此您最终必须使用兼容层

https://github.com/flowjs/fusty-flow.js https://github.com/flowjs/fusty-flow.js

使用AngularJS上传文件相关推荐

angularjs上传文件到服务器,AngularJS - 上传文件( Upload File)
AngularJS - 上传文件( Upload File) 我们提供了上传文件的示例. 为了开发这个应用程序,我们使用了HTML,CSS和AngularJS. 以下示例显示了如何使用AngularJ ...
AngularJs 上传文件到服务器
现在项目中需要运用到AngularJs,其中用到AngularJs中上传文件功能,借此,记录下,怎样运用AngularJs中的组件.首先,去下载一个叫ng-file-upload的插件.下载地址:ht ...
angularjs上传文件到服务器,AngularJS：如何使用multipart表单实现简单的文件上传？...
直接发送文件更有效. 该Base64编码的Content-Type: multipart/form-data增加了额外的33%的开销.如果服务器支持它,则直接发送文件更有效:$scope.upload ...
angularjs php上传文件,AngularJS 文件上传的功能你了解的多少？几分钟就让你了解angularjs的文件上传...
本篇文章主要的讲述了angularjs的文件上传功能,大家又不懂都可以来看,希望能帮助到大家.下面就让我们一起来看这篇文章吧问题描述附件上传检定结果以附件形式上传. 这里先不考虑api. 实现的任 ...
AngularJS PrimeNG 上传文件进度条
AngularJS PrimeNG 上传文件进度条 1.思路: 2.父页面代码实现: 3.子页面代码实现 1.思路: 使用p-progressBar,创建一个新画面,浮在p-fileUpload组件 ...
angularjs php上传文件,学习使用AngularJS文件上传控件_AngularJS
前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用angular,且不想因为一个上传功能又引入一个jque ...
php实现ftp上传,PHP_PHP实现ftp上传文件示例，FTP上传是PHP实现的一个常见且 - phpStudy...
PHP实现ftp上传文件示例 FTP上传是PHP实现的一个常见且非常重要的应用技巧,今天就来与大家分享一下PHP实现FTP上传文件的简单示例.希望对大家的PHP学习能带来一定的帮助. 主要代码如下: ...
文件上传并展示上传文件
1.问题背景利用文件上传组件file,上传文件后并显示文件(图片) 2.实现源码 <!DOCTYPE html> <html><head><meta cha ...
angular文件上传php,ajax jquery angular 上传文件与分隔上传
简单总结下 #ajax上传文件 var xmlhttp = new XMLHttpRequest(); xmlhttp.open("POST", "2.php" ...

使用AngularJS上传文件

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

使用AngularJS上传文件相关推荐

最新文章

热门文章