AngularJS:如何使用分块表单实现简单的文件上传？
AngularJS:如何使用分块表单实现简单的文件上传？
提问于 2012-12-20 07:35:57
我想做一个简单的从AngularJS到node.js服务器的多部分表单post，表单应该在一部分包含一个JSON对象，在另一部分包含一个图像(我目前只使用$resource发布JSON对象)。
我想我应该从输入文件“type=”开始，但后来发现AngularJS不能绑定到那个文件。
我能找到的所有例子都是为拖放包装jQuery插件。我想要一个简单的文件上传。
我是AngularJS的新手，对编写自己的指令感到很不舒服。
回答 5
Stack Overflow用户
发布于 2013-08-25 00:53:50
您可以使用simple/lightweight ng-file-upload指令。它支持非HTML5浏览器的拖放、文件进度和文件上传，支持FileAPI flash填充
<div ng-controller="MyCtrl">
<input type="file" ngf-select="onFileSelect($files)" multiple>
</div>JS：
//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);
});
}];Stack Overflow用户
发布于 2012-12-20 07:50:44
我刚刚遇到了这个问题。因此，有几种方法。首先，新的浏览器支持
var formData = new FormData();Follow this link to a blog with info about how支持仅限于现代浏览器，但除此之外，它完全解决了这个问题。
否则，您可以使用target属性将表单发布到iframe。在发布表单时，请确保将目标设置为iframe，并将其display属性设置为none。目标是iframe的名称。(只想让你知道。)
我希望这能帮到你
Stack Overflow用户
发布于 2016-02-16 19:30:20
我知道这是一个较晚的条目，但我已经创建了一个简单的upload指令。你很快就可以开始工作了！
<input type="file" multiple ng-simple-upload web-api-url="/api/post"
callback-fn="myCallback" />关于Github的ng-simple-upload更多信息，并提供了一个使用Web的示例。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13963022
复制相关文章
相似问题