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

文件上传功能作为网页重要的组成部分，几乎无处不在，从简单的单个文件上传到复杂的批量上传、拖放上传，需要开发者花费大量的时间和精力去处理，以期实现好用的上传功能。这篇文章向大家推荐几款很棒的 JavaScript 文件上传功能增强插件。

　　jQuery File Uploader

　　这是最受欢迎的 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

　　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 style="line-height: 1.5">　</span>

　　插件下载      在线演示

　　Uploadify

　　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     }); });

　　插件下载      在线演示

　　FineUploader

　　这个 JavaScript 插件可以帮助你在网站中集成体验极好的文件上传功能。可以结合 jQuery 或者 Bootstrap 使用。

　　主要特色：

• 批量上传
• 显示进度条
• 拖放上传
• 自动或者手动上传，可取消
• 自定义错误提示信息
• 自动或者手动重试
• 内置的校验规则
• 可编辑文件名称

　　使用示例：

　　（1）手动触发上传

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<div id="manual-fine-uploader"></div> <div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;">   <i class="icon-upload icon-white"></i> Upload now </div>   <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="jquery.fineuploader-{VERSION}.js"></script> <script>   $(document).ready(function() {     var manualuploader = $('#manual-fine-uploader').fineUploader({       request: {         endpoint: 'server/handleUploads'       },       autoUpload: false,       text: {         uploadButton: '<i class="icon-plus icon-white"></i> Select Files'       }     });       $('#triggerUpload').click(function() {       manualuploader.fineUploader('uploadStoredFiles');     });   }); </script>

　　（2）编辑文件名称

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <title>Fine Uploader - jQuery Wrapper Minimal Demo</title>     <link href="fineuploader-{VERSION}.css" rel="stylesheet">   </head>   <body>     <div id="jquery-wrapped-fine-uploader"></div>       <div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;">         <i class="icon-upload icon-white"></i> Upload now     </div>       <script src="http://code.jquery.com/jquery-latest.js"></script>     <script src="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）自定义选项

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<div id="restricted-fine-uploader"></div>   <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="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('<div class="alert alert-error">' + message + '</div>');       }     });   }); </script>

　　（4）显示图片缩略图

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<div id="thumbnail-fine-uploader"></div>   <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="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('<img src="img/success.jpg" alt="' + fileName + '">');       }     });   }); </script>

　　（5）限制文件上传数

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<div id="filelimit-fine-uploader"></div>   <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="jquery.fineuploader-{VERSION}.js"></script> <script>   $(document).ready(function() {     $('#filelimit-fine-uploader').fineUploader({       request: {         endpoint: 'server/success.html'       },       validation: {         itemLimit: 3       }     });   }); </script>

　　插件下载      在线演示