原文链接：http://www.apkbus.com/blog-228660-61862.html
这是最受欢迎的 jQuery 文件上传组件，支持批量上传，拖放上传，显示上传进度条以及校验功能。
支持预览图片、音频和视频，支持跨域上传和客户端图片缩放，支持的服务端平台有：PHP, Python, Ruby on Rails, Java, Node.js, Go 等等。
使用示例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $(function () { 'use strict'; // Change this to the location of your server-side upload handler: var url = 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) { var progress = parseInt(data.loaded / data.total * 100, 10); $('#progress .progress-bar').css( 'width', progress + '%' ); } }).prop('disabled', !$.support.fileInput) .parent().addClass($.support.fileInput ? undefined : 'disabled'); }); |
DropzoneJS 是一个用于现代浏览器的开源的拖放上传插件，最大的特色是即时图片预览功能。
使用方法非常简单，只需添加 class 即可：
1 | <form id="my-awesome-dropzone" action="/target" class="dropzone"></form> |
或者手动实例化：
1 | new Dropzone("div#my-dropzone", { /* options */ }); |
可以添加更多参数：
1 | Dropzone.options.myAwesomeDropzone = { maxFilesize: 1 }; |
发可以自定义事件：
1 2 3 4 5 6 7 8 | Dropzone.options.myDropzone({ init: function() { this.on("error", function(file, message) { alert(message); }); } }); // or if you need to access a Dropzone somewhere else: var myDropzone = Dropzone.forElement("div#my-dropzone"); myDropzone.on("error", function(file, message) { alert(message); });<span > </span> |
Uploadify 有两个版本，HTML5 方法上传版本和传统的 Flash 上传。支持高度自定义，可以完美的继承到你的网站中。
Flash 版本兼容性好，使用示例：
1 2 3 4 5 6 7 8 | $(function() { $("#file_upload_1").uploadify({ height : 30, swf : '/uploadify/uploadify.swf', uploader : '/uploadify/uploadify.php', width : 120 }); }); |
这个 JavaScript 插件可以帮助你在网站中集成体验极好的文件上传功能。可以结合 jQuery 或者 Bootstrap 使用。
主要特色：
· 批量上传
· 显示进度条
· 拖放上传
· 自动或者手动上传，可取消
· 自定义错误提示信息
· 自动或者手动重试
· 内置的校验规则
· 可编辑文件名称
使用示例：
（1）手动触发上传
（2）编辑文件名称
（3）自定义选项
（4）显示图片缩略图
（5）限制文件上传数