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

这是最受欢迎的jQuery文件上传组件，支持批量上传，拖放上传，显示上传进度条以及校验功能。支持预览图片、音频和视频，支持跨域上传和客户端图片缩放，支持的服务端平台有：PHP, Python, Ruby on Rails, Java, Node.js, Go 等等。使用示例：?1234567891011121314151617181920212223$(function() use strict;/ Change this to the location of your server-side upload handler:varurl = window.location.hostname = blueimp.github.io?//:server/php/;$(#fileupload).fileupload(url: url,dataType:json,done:function(e, data) $.each(data.result.files,function(index, file) $().text().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 即可：?1或者手动实例化：?1newDropzone(div#my-dropzone, /* options */);可以添加更多参数：?1Dropzone.options.myAwesomeDropzone = maxFilesize: 1 ;发可以自定义事件：?12345678Dropzone.options.myDropzone(init:function() this.on(error,function(file, message) alert(message); ););/ or if you need to access a Dropzone somewhere else:varmyDropzone = Dropzone.forElement(div#my-dropzone);myDropzone.on(error,function(file, message) alert(message); );插件下载 在线演示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）手动触发上传?123456789101112131415161718192021222324 Upload now$(document).ready(function() var manualuploader = $(#manual-fine-uploader).fineUploader(request: endpoint: server/handleUploads,autoUpload: false,text: uploadButton: Select Files);$(#triggerUpload).click(function() manualuploader.fineUploader(uploadStoredFiles);););（2）编辑文件名称?12345678910111213141516171819202122232425262728293031323334Fine Uploader - jQuery Wrapper Minimal Demo Upload now$(document).ready(function () $(#myFineUploader).fineUploader(request: endpoint: server/handleUploads,editFilename: enabled: true,autoUpload: false);$(#triggerUpload).click(function() $(#myFineuploader).fineUploader(uploadStoredFiles););（3）自定义选项?12345678910111213141516171819202122232425$(document).ready(function() $(#restricted-fine-uploader).fineUploader(request: endpoint: server/success.html,multiple: false,validation: allowedExtensions: jpeg, jpg, txt,sizeLimit: 51200 / 50 kB = 50 * 1024 bytes,text: uploadButton: Click or Drop,showMessage: function(message) / Using Bootstraps classes$(#restricted-fine-uploader).append( + message + );););（4）显示图片缩略图?1234567891011121314151617181920212223$(document).ready(function() $(#thumbnail-fine-uploader).fineUploader(request: endpoint: server/success.html,validation: allowedExtensions: jpeg, jpg, gif, png,text: uploadButton: Click or Drop).on(complete, function(event, id, fileName, responseJSON) if (responseJSON.success) $(this).append();););（5）限制文件上