**[jQuery File Uploader](http://blueimp.github.io/jQuery-File-Upload/basic.html)** [](http://blueimp.github.io/jQuery-File-Upload/basic.html) 这是最受欢迎的 [**jQuery**](http://www.cnblogs.com/lhb25/category/277997.html) 文件上传组件，支持批量上传，拖放上传，显示上传进度条以及校验功能。 支持预览图片、音频和视频，支持跨域上传和客户端图片缩放，支持的服务端平台有：PHP, Python, Ruby on Rails, Java, Node.js, Go 等等。 使用示例： ~~~ $(function() { 'use strict'; // Change this to the location of your server-side upload handler: 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'); }); ~~~ [插件下载](https://github.com/blueimp/jQuery-File-Upload/archive/8.8.5.zip)[在线演示](http://blueimp.github.io/jQuery-File-Upload/) **[DropZoneJS](http://www.dropzonejs.com/)** [](http://www.dropzonejs.com/) DropzoneJS 是一个用于现代浏览器的开源的拖放上传插件，最大的特色是即时图片预览功能。 使用方法非常简单，只需添加 class 即可： [?](#) <table cellpadding="0" cellspacing="0" border="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="html plain">&lt;</code><code class="html keyword">form</code><code class="html color1">id</code><code class="html plain">=</code><code class="html string">"my-awesome-dropzone"</code><code class="html color1">action</code><code class="html plain">=</code><code class="html string">"/target"</code><code class="html color1">class</code><code class="html plain">=</code><code class="html string">"dropzone"</code><code class="html plain">&gt;&lt;/</code><code class="html keyword">form</code><code class="html plain">&gt;</code></div></div></td></tr></tbody></table> 或者手动实例化： [?](#) <table cellpadding="0" cellspacing="0" border="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="javascript keyword">new</code><code class="javascript plain">Dropzone(</code><code class="javascript string">"div#my-dropzone"</code><code class="javascript plain">, {</code><code class="javascript comments">/* options */</code> <code class="javascript plain">});</code></div></div></td></tr></tbody></table> 可以添加更多参数： [?](#) <table cellpadding="0" cellspacing="0" border="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="javascript plain">Dropzone.options.myAwesomeDropzone = { maxFilesize: 1 };</code></div></div></td></tr></tbody></table> 发可以自定义事件： [?](#) <table cellpadding="0" cellspacing="0" border="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="javascript plain">Dropzone.options.myDropzone({</code></div><div class="line number2 index1 alt1"><code class="javascript spaces"/><code class="javascript plain">init:</code><code class="javascript keyword">function</code><code class="javascript plain">() {</code></div><div class="line number3 index2 alt2"><code class="javascript spaces"/><code class="javascript keyword">this</code><code class="javascript plain">.on(</code><code class="javascript string">"error"</code><code class="javascript plain">,</code><code class="javascript keyword">function</code><code class="javascript plain">(file, message) { alert(message); });</code></div><div class="line number4 index3 alt1"><code class="javascript spaces"/><code class="javascript plain">}</code></div><div class="line number5 index4 alt2"><code class="javascript plain">});</code></div><div class="line number6 index5 alt1"><code class="javascript comments">// or if you need to access a Dropzone somewhere else:</code></div><div class="line number7 index6 alt2"><code class="javascript keyword">var</code><code class="javascript plain">myDropzone = Dropzone.forElement(</code><code class="javascript string">"div#my-dropzone"</code><code class="javascript plain">);</code></div><div class="line number8 index7 alt1"><code class="javascript plain">myDropzone.on(</code><code class="javascript string">"error"</code><code class="javascript plain">,</code><code class="javascript keyword">function</code><code class="javascript plain">(file, message) { alert(message); });&lt;span style=</code><code class="javascript string">"line-height: 1.5;"</code><code class="javascript plain">&gt;　&lt;/span&gt;</code></div></div></td></tr></tbody></table> [插件下载](https://github.com/enyo/dropzone/archive/master.zip)[在线演示](http://www.dropzonejs.com/) **[Uploadify](http://www.uploadify.com/)** [](http://www.uploadify.com/) Uploadify 有两个版本，[**HTML5**](http://www.cnblogs.com/lhb25/category/146076.html) 方法上传版本和传统的 Flash 上传。支持高度自定义，可以完美的继承到你的网站中。 Flash 版本兼容性好，使用示例： [?](#) <table cellpadding="0" cellspacing="0" border="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="javascript plain">$(</code><code class="javascript keyword">function</code><code class="javascript plain">() {</code></div><div class="line number2 index1 alt1"><code class="javascript spaces"/><code class="javascript plain">$(</code><code class="javascript string">"#file_upload_1"</code><code class="javascript plain">).uploadify({</code></div><div class="line number3 index2 alt2"><code class="javascript spaces"/><code class="javascript plain">height : 30,</code></div><div class="line number4 index3 alt1"><code class="javascript spaces"/><code class="javascript plain">swf :</code><code class="javascript string">'/uploadify/uploadify.swf'</code><code class="javascript plain">,</code></div><div class="line number5 index4 alt2"><code class="javascript spaces"/><code class="javascript plain">uploader :</code><code class="javascript string">'/uploadify/uploadify.php'</code><code class="javascript plain">,</code></div><div class="line number6 index5 alt1"><code class="javascript spaces"/><code class="javascript plain">width : 120</code></div><div class="line number7 index6 alt2"><code class="javascript spaces"/><code class="javascript plain">});</code></div><div class="line number8 index7 alt1"><code class="javascript plain">});</code></div></div></td></tr></tbody></table> [插件下载](http://www.uploadify.com/wp-content/uploads/files/uploadify.zip)[在线演示](http://www.uploadify.com/demos/) **[FineUploader](http://fineuploader.com/)** [](http://fineuploader.com/) 这个 [**JavaScript**](http://www.cnblogs.com/lhb25/category/146074.html) 插件可以帮助你在网站中集成体验极好的文件上传功能。可以结合 [**jQuery**](http://www.cnblogs.com/lhb25/category/277997.html) 或者 Bootstrap 使用。 主要特色： - 批量上传 - 显示进度条 - 拖放上传 - 自动或者手动上传，可取消 - 自定义错误提示信息 - 自动或者手动重试 - 内置的校验规则 - 可编辑文件名称 使用示例： （1）手动触发上传 ~~~ <divid="manual-fine-uploader"></div> <divid="triggerUpload"class="btn btn-primary"style="margin-top: 10px;"> <iclass="icon-upload icon-white"></i> Upload now </div> <scriptsrc="http://code.jquery.com/jquery-latest.js"></script> <scriptsrc="jquery.fineuploader-{VERSION}.js"></script> <script> $(document).ready(function() { var manualuploader = $('#manual-fine-uploader').fineUploader({ request: { endpoint: 'server/handleUploads' }, autoUpload: false, text: { uploadButton: '<iclass="icon-plus icon-white"></i> Select Files' } }); $('#triggerUpload').click(function() { manualuploader.fineUploader('uploadStoredFiles'); }); }); </script> ~~~ （2）编辑文件名称 ~~~ <!DOCTYPE html> <html> <head> <metacharset="utf-8"> <title>Fine Uploader - jQuery Wrapper Minimal Demo</title> <linkhref="fineuploader-{VERSION}.css"rel="stylesheet"> </head> <body> <divid="jquery-wrapped-fine-uploader"></div> <divid="triggerUpload"class="btn btn-primary"style="margin-top: 10px;"> <iclass="icon-upload icon-white"></i> Upload now </div> <scriptsrc="http://code.jquery.com/jquery-latest.js"></script> <scriptsrc="jquery.fineuploader-{VERSION}.js"></script> <script> $(document).ready(function () { $('#myFineUploader').fineUploader({ request: { endpoint: 'server/handleUploads' }, editFilename: { enabled: true }, autoUpload: false }); $('#triggerUpload').click(function() { $('#myFineuploader').fineUploader('uploadStoredFiles'); }); </script> </body> </html> ~~~ （3）自定义选项 ~~~ <divid="restricted-fine-uploader"></div> <scriptsrc="http://code.jquery.com/jquery-latest.js"></script> <scriptsrc="jquery.fineuploader-{VERSION}.js"></script> <script> $(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 Bootstrap's classes $('#restricted-fine-uploader').append('<divclass="alert alert-error">' + message + '</div>'); } }); }); </script> ~~~ （4）显示图片缩略图 ~~~ <divid="thumbnail-fine-uploader"></div> <scriptsrc="http://code.jquery.com/jquery-latest.js"></script> <scriptsrc="jquery.fineuploader-{VERSION}.js"></script> <script> $(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('<imgsrc="img/success.jpg"alt="' + fileName + '">'); } }); }); </script> ~~~ （5）限制文件上传数 ~~~ <divid="filelimit-fine-uploader"></div> <scriptsrc="http://code.jquery.com/jquery-latest.js"></script> <scriptsrc="jquery.fineuploader-{VERSION}.js"></script> <script> $(document).ready(function() { $('#filelimit-fine-uploader').fineUploader({ request: { endpoint: 'server/success.html' }, validation: { itemLimit: 3 } }); }); </script> ~~~ [插件下载](http://www.cnblogs.com/lhb25/p/form-enhanced-with-javascript-one.html)[在线演示](http://fineuploader.com/) 本文转自：http://www.cnblogs.com/lhb25/p/form-enhanced-with-javascript-five.html