【精心推荐】几款极好的 JavaScript 文件上传插件

时间 2019-12-13

标签精心推荐极好 javascript 文件上传插件栏目 JavaScript 繁體版

原文原文链接

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

您可能感兴趣的相关文章

jQuery File Uploaderphp

这是最受欢迎的 jQuery 文件上传组件，支持批量上传，拖放上传，显示上传进度条以及校验功能。css

支持预览图片、音频和视频，支持跨域上传和客户端图片缩放，支持的服务端平台有：PHP, Python, Ruby on Rails, Java, Node.js, Go 等等。html

使用示例：java

 
         $( 
         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' 
         ); 
        
         });

插件下载在线演示 jquery

DropZoneJSgit

DropzoneJS 是一个用于现代浏览器的开源的拖放上传插件，最大的特点是即时图片预览功能。github

使用方法很是简单，只需添加 class 便可：ajax

1	`<` `form` `id` `=` `"my-awesome-dropzone"` `action` `=` `"/target"` `class` `=` `"dropzone"` `></` `form` `>`

或者手动实例化：json

1	`new` `Dropzone(` `"div#my-dropzone"` `, {` `/* options */` `});`

能够添加更多参数：

1	`Dropzone.options.myAwesomeDropzone = { maxFilesize: 1 };`

发能够自定义事件：

 
         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 版本兼容性好，使用示例：

 
         $( 
         function 
         () { 
        
         $( 
         "#file_upload_1" 
         ).uploadify({ 
        
         height        : 30, 
        
         swf           :  
         '/uploadify/uploadify.swf' 
         , 
        
         uploader      :  
         '/uploadify/uploadify.php' 
         , 
        
         width         : 120 
        
         }); 
        
         });

插件下载在线演示

FineUploader

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

主要特点：

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

使用示例：

（1）手动触发上传

（2）编辑文件名称

（3）自定义选项

（4）显示图片缩略图

（5）限制文件上传数

插件下载在线演示

您可能感兴趣的相关文章