这是我的HTML表单:
<form name="myForm" ng-submit="">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>
我想从本地机器上传一个图像,并想读取上传文件的内容。所有这些我都想用AngularJS来做。
当我试图打印$scope的值时。文件是未定义的。
这是我的HTML表单:
<form name="myForm" ng-submit="">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>
我想从本地机器上传一个图像,并想读取上传文件的内容。所有这些我都想用AngularJS来做。
当我试图打印$scope的值时。文件是未定义的。
当前回答
下面是文件上传的工作示例:
http://jsfiddle.net/vishalvasani/4hqVu/
在这个函数中
setFiles
从视图更新控制器中的文件数组
or
你可以使用AngularJS检查jQuery文件上传
http://blueimp.github.io/jQuery-File-Upload/angularjs.html
其他回答
<input type=file>元素默认不使用ng-model指令。它需要一个自定义指令:
使用ng-model1的select-ng-files指令的工作演示
angular.module("app",[]); angular.module("app").directive("selectNgFiles", function() { return { require: "ngModel", link: function postLink(scope,elem,attrs,ngModel) { elem.on("change", function(e) { var files = elem[0].files; ngModel.$setViewValue(files); }) } } }); <script src="//unpkg.com/angular/angular.js"></script> <body ng-app="app"> <h1>AngularJS Input `type=file` Demo</h1> <input type="file" select-ng-files ng-model="fileList" multiple> <h2>Files</h2> <div ng-repeat="file in fileList"> {{file.name}} </div> </body>
美元http。从FileList中post
$scope.upload = function(url, fileList) {
var config = { headers: { 'Content-Type': undefined },
transformResponse: angular.identity
};
var promises = fileList.map(function(file) {
return $http.post(url, file, config);
});
return $q.all(promises);
};
当发送带有File对象的POST时,重要的是设置'Content-Type': undefined。然后XHR发送方法将检测File对象并自动设置内容类型。
你可以使用flow.js实现良好的文件和文件夹上传。
https://github.com/flowjs/ng-flow
点击这里查看演示
http://flowjs.github.io/ng-flow/
它不支持IE7, IE8, IE9,所以你最终必须使用兼容层
https://github.com/flowjs/fusty-flow.js
这里的一些答案建议使用FormData(),但不幸的是,这是一个浏览器对象,在Internet Explorer 9及以下版本中不可用。如果您需要支持这些旧浏览器,您将需要一个备份策略,例如使用<iframe>或Flash。
已经有很多Angular.js模块来执行文件上传。这两种浏览器都明确支持旧浏览器:
https://github.com/leon/angular-upload -使用iframes作为备份 https://github.com/danialfarid/ng-file-upload -使用FileAPI/Flash作为备份
还有一些其他的选择:
https://github.com/nervgh/angular-file-upload/ https://github.com/uor/angular-file https://github.com/twilson63/ngUpload https://github.com/uploadcare/angular-uploadcare
其中一个应该适合你的项目,或者可能会给你一些关于如何自己编写代码的见解。
HTML
<html>
<head></head>
<body ng-app = "myApp">
<form ng-controller = "myCtrl">
<input type = "file" file-model="files" multiple/>
<button ng-click = "uploadFile()">upload me</button>
<li ng-repeat="file in files">{{file.name}}</li>
</form>
脚本
<script src =
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
angular.module('myApp', []).directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('change', function(){
$parse(attrs.fileModel).assign(scope,element[0].files)
scope.$apply();
});
}
};
}]).controller('myCtrl', ['$scope', '$http', function($scope, $http){
$scope.uploadFile=function(){
var fd=new FormData();
console.log($scope.files);
angular.forEach($scope.files,function(file){
fd.append('file',file);
});
$http.post('http://localhost:1337/mediaobject/upload',fd,
{
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).success(function(d)
{
console.log(d);
})
}
}]);
</script>
我尝试了@ anoz(正确答案)给出的所有替代方案…最好的解决方案是https://github.com/danialfarid/angular-file-upload
一些特点:
进步 多文件 字段 旧浏览器(IE8-9)
这对我来说很好。你只需要注意说明。
在服务器端,我使用NodeJs, Express 4和Multer中间件来管理多部分请求。