angular-file-upload详细介绍
angular-file-upload 是一款轻量级的 AngularJS 文件上传工具,为不支持浏览器的 FileAPI polyfill 设计,使用 HTML5 直接进行文件上传。
在线演示
特性
支持上传进度,在上传的时候,可以取消或者中止,支持文件拖拽(HTML5),目录拖拽(weikit),CORS,PUT(html5)
/POST
方法
支持使用 Flash polyfillFileAPI 跨浏览器上传 (HTML5
和non-HTML5
) 。允许客户端在上传之前验证或者修改文件。
当文件的内容类型使用$upload.http()
时,支持直接上传到 CouchDB,imgur 等等。支持 Angular httpPOST
/PUT
请求的进度事件,更多内容请看#88(comment)
Separate shim file loaded on demand fornon-HTML5
code meaning no extra load/code if you just need HTML5 support. (Note that html5-shim.js is still needed forprogress
event inHTML5
browsers)
轻量级,使用常规的$http
来上传(支持非 HTML5 浏览器),所以提供所有 Angular$http
功能
使用
HTML:
dropfileshereHTML5DropFileisnotsupported!CancelUpload
JS:
//injectangularfileuploaddirectivesandservice.angular.module('myApp',['angularFileUpload']);varMyCtrl=['$scope','$upload',function($scope,$upload){$scope.onFileSelect=function($files){//$files:anarrayoffilesselected,eachfilehasname,size,andtype.for(vari=0;i<$files.length;i++){varfile=$files[i];$scope.upload=$upload.upload({url:'server/upload/url',//upload.phpscript,node.jsroute,orservleturl//method:'POST'or'PUT',//headers:{'header-key':'header-value'},//withCredentials:true,data:{myObj:$scope.myModelObj},file:file,//orlistoffiles($files)forhtml5only//fileName:'doc.jpg'or['1.jpg','2.jpg',...]//tomodifythenameofthefile(s)//customizefileformDataname('Content-Disposition'),serversidefilevariablename.//fileFormDataName:myFile,//oralistofnamesformultiplefiles(html5).Defaultis'file'//customizehowdataisaddedtoformData.See#40#issuecomment-28612000forsamplecode//formDataAppender:function(formData,key,val){}}).progress(function(evt){console.log('percent:'+parseInt(100.0*evt.loaded/evt.total));}).success(function(data,status,headers,config){//fileisuploadedsuccessfullyconsole.log(data);});//.error(...)//.then(success,error,progress);//accessorattacheventlistenerstotheunderlyingXMLHttpRequest.//.xhr(function(xhr){xhr.upload.addEventListener(...)})}/*alternativewayofuploading,sendthefilebinarywiththefile'scontent-type.CouldbeusedtouploadfilestoCouchDB,imgur,etc...html5FileReaderisneeded.Itcouldalsobeusedtomonitortheprogressofanormalhttppost/putrequestwithlargedata*///$scope.upload=$upload.http({...})see88#issuecomment-31366487forsamplecode.};}];