blocks|key|195788|text|我刚刚遇到了这个问题。因此，有几种方法。首先，新的浏览器支持|type|unstyled|depth|inlineStyleRanges|entityRanges|data|195789|var+formData+=+new+FormData();|code-block|syntax|javascript|195790|Follow+this+link+to+a+blog+with+info+about+how支持仅限于现代浏览器，但除此之外，它完全解决了这个问题。|offset|length|195791|否则，您可以使用target属性将表单发布到iframe。在发布表单时，请确保将目标设置为iframe，并将其display属性设置为none。目标是iframe的名称。(只想让你知道。)|195792|我希望这能帮到你|195793|entityMap|0|LINK|mutability|MUTABLE|url|http://blog.new-bamboo.co.uk/2012/01/10/ridiculously-simple-ajax-uploads-with-formdata^0|0|0|0|16|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@$I|Z|J|10|1|11]]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

I just had this issue. So there are a few approaches. The first is that new browsers support the
<pre><code>var formData = new FormData();
</code></pre>
<a href="http://blog.new-bamboo.co.uk/2012/01/10/ridiculously-simple-ajax-uploads-with-formdata" rel="noreferrer">Follow this link to a blog with info about</a> how support is limited to modern browsers but otherwise it totally solves this issue.
Otherwise you can post the form to an iframe using the target attribute.
When you post the form be sure to set the target to an iframe with its display property set to none.
The target is the name of the iframe. (Just so you know.)
I hope this helps

blocks|key|413975|text|我刚刚在AngularJs中为一个简单的上传器写了一个简单的指令(当然是从现有的一个)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|413976|(确切的jQuery上传插件是https://github.com/blueimp/jQuery-File-Upload)|offset|length|413977|A+Simple+Uploader+using+AngularJs+(with+CORS+Implementation)|413978|(虽然服务器端是针对PHP的，但您也可以简单地更改它的节点)|413979|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/blueimp/jQuery-File-Upload|1|https://stackoverflow.com/questions/16757916/a-simple-uploader-using-angularjs-with-cors-implementation/16757917#16757917^0|0|F|19|0|0|0|1O|1|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]|R|$5|M|N|O|A|$P|S]]]]

I just wrote a simple directive (from existing one ofcourse) for a simple uploader in AngularJs. 

(The exact jQuery uploader plugin is <a href="https://github.com/blueimp/jQuery-File-Upload" rel="nofollow noreferrer">https://github.com/blueimp/jQuery-File-Upload</a>)

<a href="https://stackoverflow.com/questions/16757916/a-simple-uploader-using-angularjs-with-cors-implementation/16757917#16757917">A Simple Uploader using AngularJs (with CORS Implementation)</a>

(Though the server side is for PHP, you can simple change it node also)

blocks|key|414016|text|您可以使用simple/lightweight+ng-file-upload指令。它支持非HTML5浏览器的拖放、文件进度和文件上传，支持FileAPI+flash填充|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|414017|<div+ng-controller="MyCtrl">
++<input+type="file"+ngf-select="onFileSelect($files)"+multiple>
</div>|code-block|syntax|javascript|414018|JS：|414019|//inject+angular+file+upload+directive.
angular.module('myApp',+['ngFileUpload']);

var+MyCtrl+=+[+'$scope',+'Upload',+function($scope,+Upload)+{
++$scope.onFileSelect+=+function($files)+{
++Upload.upload({
++++url:+'my/upload/url',
++++file:+$files,++++++++++++
++}).progress(function(e)+{
++}).then(function(data,+status,+headers,+config)+{
++++//+file+is+uploaded+successfully
++++console.log(data);
++});+

}];|414020|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/danialfarid/ng-file-upload^0|O|E|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

You can use the simple/lightweight <a href="https://github.com/danialfarid/ng-file-upload" rel="noreferrer">ng-file-upload</a> directive.
It supports drag&amp;drop, file progress and file upload for non-HTML5 browsers with FileAPI flash shim

<pre><code>&lt;div ng-controller="MyCtrl"&gt;
 &lt;input type="file" ngf-select="onFileSelect($files)" multiple&gt;
&lt;/div&gt;
</code></pre>

JS:

<pre><code>//inject angular file upload directive.
angular.module('myApp', ['ngFileUpload']);

var MyCtrl = [ '$scope', 'Upload', function($scope, Upload) {
 $scope.onFileSelect = function($files) {
 Upload.upload({
 url: 'my/upload/url',
 file: $files, 
 }).progress(function(e) {
 }).then(function(data, status, headers, config) {
 // file is uploaded successfully
 console.log(data);
 }); 

}];
</code></pre>

blocks|key|195917|text|我知道这是一个较晚的条目，但我已经创建了一个简单的upload指令。你很快就可以开始工作了！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|195918|<input+type="file"+multiple+ng-simple-upload+web-api-url="/api/post"
+++++++callback-fn="myCallback"+/>|code-block|syntax|javascript|195919|关于Github的ng-simple-upload更多信息，并提供了一个使用Web的示例。|offset|length|195920|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/shammelburg/ng-simple-upload^0|0|0|9|G|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

I know this is a late entry but I have created a simple upload directive. Which you can get working in no time!

<pre><code>&lt;input type="file" multiple ng-simple-upload web-api-url="/api/post"
 callback-fn="myCallback" /&gt;
</code></pre>

<a href="https://github.com/shammelburg/ng-simple-upload" rel="nofollow noreferrer">ng-simple-upload</a> more on Github with an example using Web API.

blocks|key|414087|text|您可以通过$resource上传，方法是将数据分配给资源actions的参数属性，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|414088|$scope.uploadFile+=+function(files)+{
++++var+fdata+=+new+FormData();
++++fdata.append("file",+files[0]);

++++$resource('api/post/:id',+{+id:+"@id"+},+{
++++++++postWithFile:+{
++++++++++++method:+"POST",
++++++++++++data:+fdata,
++++++++++++transformRequest:+angular.identity,
++++++++++++headers:+{+'Content-Type':+undefined+}
++++++++}
++++}).postWithFile(fdata).$promise.then(function(response){
+++++++++//successful+
++++},function(error){
++++++++//error
++++});
};|code-block|syntax|javascript|414089|entityMap^0|5|9|S|7|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

You could upload via <code>$resource</code> by assigning data to params attribute of resource <code>actions</code> like so:

<pre><code>$scope.uploadFile = function(files) {
 var fdata = new FormData();
 fdata.append("file", files[0]);

 $resource('api/post/:id', { id: "@id" }, {
 postWithFile: {
 method: "POST",
 data: fdata,
 transformRequest: angular.identity,
 headers: { 'Content-Type': undefined }
 }
 }).postWithFile(fdata).$promise.then(function(response){
 //successful 
 },function(error){
 //error
 });
};
</code></pre>

I want to do a simple multipart form post from AngularJS to a node.js server,
the form should contain a JSON object in one part and an image in the other part,
(I'm currently posting only the JSON object with $resource)

I figured I should start with input type="file", but then found out that AngularJS can't bind to that..

all the examples I can find are for wraping jQuery plugins for drag &amp; drop. I want a simple upload of one file.

I'm new to AngularJS and don't feel comfortable at all with writing my own directives.

AngularJS: how to implement a simple file upload with multipart form?

服务器

jQuery

HTML5

JSON

我想做一个简单的从AngularJS到node.js服务器的多部分表单post，表单应该在一部分包含一个JSON对象，在另一部分包含一个图像(我目前只使用$resource发布JSON对象)。我想我应该从输入文件“type=”开始，但后来发现AngularJS不能绑定到那个文件。我能找到的所有例子都是为拖放包装jQue...

问AngularJS:如何使用分块表单实现简单的文件上传？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS:如何使用分块表单实现简单的文件上传？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS:如何使用分块表单实现简单的文件上传？
EN