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

最新推荐文章于 2021-08-05 16:12:34 发布

昆仑无悔

最新推荐文章于 2021-08-05 16:12:34 发布

阅读量567

点赞数

分类专栏： java

java 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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

您可能感兴趣的相关文章

jQuery File Uploader

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

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

使用示例：

 
          $( 
          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 即可：

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

或者手动实例化：

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

可以添加更多参数：

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