几款极好的JavaScript文件上传插件

这是最受欢迎的jQuery文件上传组件，支持批量上传，拖放上传，显示上传进度条以及校验功能。支持预览图片、音频和视频，支持跨域上传和客户端图片缩放，支持的服务端平台有：PHP,Python,RubyonRails,Java,Node.js,Go等等。使用示例：?1234567891011121314151617181920212223$(function(){'usestrict';//Changethistothelocationofyourserver-sideuploadhandler:varurl=window.location.hostname==='blueimp.github.io'?'//jquery-file-upload.appspot.com/':'server/php/';$('#fileupload').fileupload({url:url,dataType:'json',done:function(e,data){$.each(data.result.files,function(index,file){$('p/').text(file.name).appendTo('#files');});},progressall:function(e,data){varprogress=parseInt(data.loaded/data.total*100,10);$('#progress.progress-bar').css('width',progress+'%');}}).prop('disabled',!$.support.fileInput).parent().addClass($.support.fileInput?undefined:'disabled');});插件下载在线演示DropZoneJSDropzoneJS是一个用于现代浏览器的开源的拖放上传插件，最大的特色是即时图片预览功能。使用方法非常简单，只需添加class即可：?1formid=my-awesome-dropzoneaction=/targetclass=dropzone/form或者手动实例化：?1newDropzone(div#my-dropzone,{/*options*/});可以添加更多参数：?1Dropzone.options.myAwesomeDropzone={maxFilesize:1};发可以自定义事件：?12345678Dropzone.options.myDropzone({init:function(){this.on(error,function(file,message){alert(message);});}});//orifyouneedtoaccessaDropzonesomewhereelse:varmyDropzone=Dropzone.forElement(div#my-dropzone);myDropzone.on(error,function(file,message){alert(message);});spanstyle=line-height:1.5;/span插件下载在线演示UploadifyUploadify有两个版本，HTML5方法上传版本和传统的Flash上传。支持高度自定义，可以完美的继承到你的网站中。Flash版本兼容性好，使用示例：?12345678$(function(){$(#file_upload_1).uploadify({height:30,swf:'/uploadify/uploadify.swf',uploader:'/uploadify/uploadify.php',width:120});});插件下载在线演示FineUploader这个JavaScript插件可以帮助你在网站中集成体验极好的文件上传功能。可以结合jQuery或者Bootstrap使用。主要特色：批量上传显示进度条拖放上传自动或者手动上传，可取消自定义错误提示信息自动或者手动重试内置的校验规则可编辑文件名称使用示例：（1）手动触发上传?12345678910111213divid=manual-fine-uploader/divdivid=triggerUploadclass=btnbtn-primarystyle=margin-top:10px;iclass=icon-uploadicon-white/iUploadnow/divscriptsrc==jquery.fineuploader-{VERSION}.js/scriptscript$(document).ready(function(){varmanualuploader=$('#manual-fine-uploader').fineUploader({request:{endpoint:'server/handleUploads'},1415161718192021222324autoUpload:false,text:{uploadButton:'iclass=icon-plusicon-white/iSelectFiles'}});$('#triggerUpload').click(function(){manualuploader.fineUploader('uploadStoredFiles');});});/script（2）编辑文件名称?1234567891011121314151617181920212223242526272829!DOCTYPEhtmlhtmlheadmetacharset=utf-8titleFineUploader-jQueryWrapperMinimalDemo/titlelinkhref=fineuploader-{VERSION}.cssrel=stylesheet/headbodydivid=jquery-wrapped-fine-uploader/divdivid=triggerUploadclass=btnbtn-primarystyle=margin-top:10px;iclass=icon-uploadicon-white/iUploadnow/divscriptsrc==jquery.fineuploader-{VERSION}.js/scriptscript$(document).ready(function(){$('#myFineUploader').fineUploader({request:{endpoint:'server/handleUploads'},editFilename:{enabled:true},autoUpload:false});$('#triggerUpload').click(function(){3031323334$('#myFineuploader').fineUploader('uploadStoredFiles');});/script/body/html（3）自定义选项?12345678910111213141516171819202122232425divid=restricted-fine-uploader/divscriptsrc==jquery.fineuploader-{VERSION}.js/scriptscript$(document).ready(function(){$('#restricted-fine-uploader').fineUploader({request:{endpoint:'server/success.html'},multiple:false,validation:{allowedExtensions:['jpeg','jpg','txt'],sizeLimit:51200//50kB=50*1024bytes},text:{uploadButton:'ClickorDrop'},showMessage:function(message){//UsingBootstrap'sclasses$('#restricted-fine-uploader').append('divclass=alertalert-error'+message+'/div');}});});/script（4）显示图片缩略图?1234567divid=thumbnail-fine-uploader/divscriptsrc==jquery.fineuploader-{VERSION}.js/scriptscript$(document).ready(function(){$('#thumbnail-fine-uploader').fineUploader({891011121314151617181920212223request:{endpoint:'server/success.html'},validation:{allowedExtensions:['jpeg','jpg','gif','png']},text:{uploadButton:'ClickorDrop'}}).on('complete',function(event,id,fileName,responseJSON){if(responseJSON.success){$(this).append('imgsrc=img/success.jpgalt='+fileName+'');}});});/script（5）限制文件上传数?12345678910111213141516divid=filelimit-fine-uploader/divscriptsrc==jquery.fineuploader-{VERSION}.js/scriptscript$(document).ready(function(){$('#filelimit-fine-uploader').fineUploader({request:{endpoint:'server/success.html'},validation:{itemLimit:3}});});/script