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

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

转载最新推荐文章于 2021-08-05 16:12:34 发布 · 602 阅读

java 专栏收录该内容

26 篇文章

订阅专栏

本文推荐了几款优秀的JavaScript文件上传插件，包括jQuery FileUploader、DropZoneJS、Uploadify和FineUploader等，这些插件支持批量上传、拖放上传、显示上传进度等功能，并提供了丰富的使用示例。

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