angular-file-uploadAngularJS 文件上传工具
angular-file-upload 是一款轻量级的 AngularJS 文件上传工具,为不支持浏览器的 FileAPI polyfill 设计,使用 HTML5 直接进行文件上传。
特性
支持上传进度,在上传的时候,可以取消或者中止,支持文件拖拽(HTML5),目录拖拽(weikit),CORS,
PUT(html5)
/POST
方法支持使用 Flash polyfill FileAPI 跨浏览器上传 (
HTML5
和non-HTML5
) 。允许客户端在上传之前验证或者修改文件。当文件的内容类型使用
$upload.http()
时,支持直接上传到 CouchDB,imgur 等等。支持 Angular httpPOST
/PUT
请求的进度事件,更多内容请看 #88(comment)Separate shim file loaded on demand for
non-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:
drop files here HTML5 Drop File is not supported! Cancel Upload
JS:
//inject angular file upload directives and service.angular.module('myApp', ['angularFileUpload']);var MyCtrl = [ '$scope', '$upload', function($scope, $upload) { $scope.onFileSelect = function($files) { //$files: an array of files selected, each file has name, size, and type. for (var i = 0; i < $files.length; i++) { var file = $files[i]; $scope.upload = $upload.upload({ url: 'server/upload/url', //upload.php script, node.js route, or servlet url //method: 'POST' or 'PUT', //headers: {'header-key': 'header-value'}, //withCredentials: true, data: {myObj: $scope.myModelObj}, file: file, // or list of files ($files) for html5 only //fileName: 'doc.jpg' or ['1.jpg', '2.jpg', ...] // to modify the name of the file(s) // customize file formData name ('Content-Disposition'), server side file variable name. //fileFormDataName: myFile, //or a list of names for multiple files (html5). Default is 'file' // customize how data is added to formData. See #40#issuecomment-28612000 for sample code //formDataAppender: function(formData, key, val){} }).progress(function(evt) { console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total)); }).success(function(data, status, headers, config) { // file is uploaded successfully console.log(data); }); //.error(...) //.then(success, error, progress); // access or attach event listeners to the underlying XMLHttpRequest. //.xhr(function(xhr){xhr.upload.addEventListener(...)}) } /* alternative way of uploading, send the file binary with the file's content-type. Could be used to upload files to CouchDB, imgur, etc... html5 FileReader is needed. It could also be used to monitor the progress of a normal http post/put request with large data*/ // $scope.upload = $upload.http({...}) see 88#issuecomment-31366487 for sample code. }; }];
评论
carrierwaveRails 文件上传
carrierwave是Rails的一个扩展用来提供简单而且灵活的文件上传处理,可以跟基于Rack的Web应用良好集成。示例代码:uploader=AvatarUploader.newuploader
carrierwaveRails 文件上传
0
AjaxFileUpload.jsjQuery 文件上传插件
jQuery.AjaxFileUpload.js是一款jQuery插件,用于通过ajax上传文件。功能特点:它不依赖于特定的HTML,只要给它一个“<INPUTTYPE="file">它不
AjaxFileUpload.jsjQuery 文件上传插件
0
class.upload.phpPHP文件上传管理器
class.upload.php为你管理基于HTTP的文件上传,示例代码:$foo=newUpload($_FILES['form_field']);if($foo->uploaded){ //
class.upload.phpPHP文件上传管理器
0
ShrineRuby 文件上传工具包
Shrine是提供给Ruby应用的文件上传工具包:简单,灵活,高性能,安全,支持直接上传。基础示例:require "shrine"require "shrine/storage/file_syste
ShrineRuby 文件上传工具包
0
PosterPython文件上传组件
poster提供了一组Python类和函数用来处理使用标准multipart/form-data编码的HTTPPOST请求,也就是HTTP文件上传请求。示例代码:opener=poster.strea
PosterPython文件上传组件
0
jqswfuploadjQuery 文件上传插件
jqswfupload是一个基于jQueryUI+Swfupload实现的多文件上传组件。SWFUpload是一个基于flash与javascript的客户端文件上传组件。你可以在文件选择对话框中通过
jqswfuploadjQuery 文件上传插件
0