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

您可能感兴趣的相关文章

jQuery File Uploader

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

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

使用示例：

  1. $(function () {
  2.     'use strict';
  3.     // Change this to the location of your server-side upload handler:
  4.     var url = window.location.hostname === 'blueimp.github.io' ?
  5.                 '//jquery-file-upload.appspot.com/' : 'server/php/';
  6.     $('#fileupload').fileupload({
  7.         url: url,
  8.         dataType: 'json',
  9.         done: function (e, data) {
  10.             $.each(data.result.files, function (index, file) {
  11.                 $('<p/>').text(file.name).appendTo('#files');
  12.             });
  13.         },
  14.         progressall: function (e, data) {
  15.             var progress = parseInt(data.loaded / data.total * 100, 10);
  16.             $('#progress .progress-bar').css(
  17.                 'width',
  18.                 progress + '%'
  19.             );
  20.         }
  21.     }).prop('disabled', !$.support.fileInput)
  22.         .parent().addClass($.support.fileInput ? undefined : 'disabled');
  23. });

插件下载      在线演示

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. Dropzone.options.myDropzone({
  2.   init: function() {
  3.     this.on("error", function(file, message) { alert(message); });
  4.   }
  5. });
  6. // or if you need to access a Dropzone somewhere else:
  7. var myDropzone = Dropzone.forElement("div#my-dropzone");
  8. myDropzone.on("error", function(file, message) { alert(message); });　

插件下载      在线演示

Uploadify

Uploadify 有两个版本，HTML5 方法上传版本和传统的 Flash 上传。支持高度自定义，可以完美的继承到你的网站中。

Flash 版本兼容性好，使用示例：

  1. $(function() {
  2. 	$("#file_upload_1").uploadify({
  3. 		height        : 30,
  4. 		swf           : '/uploadify/uploadify.swf',
  5. 		uploader      : '/uploadify/uploadify.php',
  6. 		width         : 120
  7. 	});
  8. });

插件下载      在线演示

FineUploader

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

主要特色：

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

使用示例：

（1）手动触发上传

  1. <div id="manual-fine-uploader"></div>
  2. <div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;">
  3.   <i class="icon-upload icon-white"></i> Upload now
  4. </div>
  5.  
  6. <script src="http://code.jquery.com/jquery-latest.js"></script>
  7. <script src="jquery.fineuploader-{VERSION}.js"></script>
  8. <script>
  9.   $(document).ready(function() {
  10.     var manualuploader = $('#manual-fine-uploader').fineUploader({
  11.       request: {
  12.         endpoint: 'server/handleUploads'
  13.       },
  14.       autoUpload: false,
  15.       text: {
  16.         uploadButton: '<i class="icon-plus icon-white"></i> Select Files'
  17.       }
  18.     });
  19.  
  20.     $('#triggerUpload').click(function() {
  21.       manualuploader.fineUploader('uploadStoredFiles');
  22.     });
  23.   });
  24. </script>

（2）编辑文件名称

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>Fine Uploader - jQuery Wrapper Minimal Demo</title>
  6.     <link href="fineuploader-{VERSION}.css" rel="stylesheet">
  7.   </head>
  8.   <body>
  9.     <div id="jquery-wrapped-fine-uploader"></div>
  10.  
  11.     <div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;">
  12.         <i class="icon-upload icon-white"></i> Upload now
  13.     </div>
  14.  
  15.     <script src="http://code.jquery.com/jquery-latest.js"></script>
  16.     <script src="jquery.fineuploader-{VERSION}.js"></script>
  17.     <script>
  18.       $(document).ready(function () {
  19.         $('#myFineUploader').fineUploader({
  20.             request: {
  21.                 endpoint: 'server/handleUploads'
  22.             },
  23.             editFilename: {
  24.                 enabled: true
  25.             },
  26.             autoUpload: false
  27.         });
  28.  
  29.         $('#triggerUpload').click(function() {
  30.             $('#myFineuploader').fineUploader('uploadStoredFiles');
  31.         });
  32.     </script>
  33.   </body>
  34. </html>

（3）自定义选项

  1. <div id="restricted-fine-uploader"></div>
  2.  
  3. <script src="http://code.jquery.com/jquery-latest.js"></script>
  4. <script src="jquery.fineuploader-{VERSION}.js"></script>
  5. <script>
  6.   $(document).ready(function() {
  7.     $('#restricted-fine-uploader').fineUploader({
  8.       request: {
  9.         endpoint: 'server/success.html'
  10.       },
  11.       multiple: false,
  12.       validation: {
  13.         allowedExtensions: ['jpeg', 'jpg', 'txt'],
  14.         sizeLimit: 51200 // 50 kB = 50 * 1024 bytes
  15.       },
  16.       text: {
  17.         uploadButton: 'Click or Drop'
  18.       },
  19.       showMessage: function(message) {
  20.         // Using Bootstrap's classes
  21.         $('#restricted-fine-uploader').append('<div class="alert alert-error">' + message + '</div>');
  22.       }
  23.     });
  24.   });
  25. </script>

（4）显示图片缩略图

  1. <div id="thumbnail-fine-uploader"></div>
  2.  
  3. <script src="http://code.jquery.com/jquery-latest.js"></script>
  4. <script src="jquery.fineuploader-{VERSION}.js"></script>
  5. <script>
  6.   $(document).ready(function() {
  7.     $('#thumbnail-fine-uploader').fineUploader({
  8.       request: {
  9.         endpoint: 'server/success.html'
  10.       },
  11.       validation: {
  12.         allowedExtensions: ['jpeg', 'jpg', 'gif', 'png']
  13.       },
  14.       text: {
  15.         uploadButton: 'Click or Drop'
  16.       }
  17.     }).on('complete', function(event, id, fileName, responseJSON) {
  18.       if (responseJSON.success) {
  19.         $(this).append('<img src="img/success.jpg" alt="' + fileName + '">');
  20.       }
  21.     });
  22.   });
  23. </script>

（5）限制文件上传数

  1. <div id="filelimit-fine-uploader"></div>
  2.  
  3. <script src="http://code.jquery.com/jquery-latest.js"></script>
  4. <script src="jquery.fineuploader-{VERSION}.js"></script>
  5. <script>
  6.   $(document).ready(function() {
  7.     $('#filelimit-fine-uploader').fineUploader({
  8.       request: {
  9.         endpoint: 'server/success.html'
  10.       },
  11.       validation: {
  12.         itemLimit: 3
  13.       }
  14.     });
  15.   });
  16. </script>

插件下载      在线演示

您可能感兴趣的相关文章

本文链接：精心推荐几款很棒的 JavaScript 文件上传插件

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

【精心推荐】几款极好的 JavaScript 文件上传插件的更多相关文章

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

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

  2. Javascript文件上传插件

    jQuery File Uploader 这是最受欢迎的 jQuery 文件上传组件,支持批量上传,拖放上传,显示上传进度条以及校验功能. 支持预览图片.音频和视频,支持跨域上传和客户端图片缩放,支持 ...

  3. 7 款基于 JavaScript/AJAX 的文件上传插件

    本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1.  jQuer ...

  4. 20款最好的jQuery文件上传插件

    当它是关于开发网络应用程序和网页的时候,文件上传功能的重要性是不容忽视的.一个文件上传功能可以让你上传所有类型的文件在网站上,包括视频,图像,文件和更多.创建一个文件上传功能,对你的网站是不是很难,有 ...

  5. 7款js文件上传插件

    1.  jQuery File Upload 具有多文件上传.拖拽.进度条和图像预览功能的文件上传插件,支持跨域.分块.暂停恢复和客户端图像缩放.可与任何服务端平台(如PHP.Python.Ruby ...

  6. 体验三大JavaScript文件上传库（Uppy.js/Filepond/Dropzone）

    最近发现了一个高颜值的前端上传组件Uppy.js,立即上手体验了一波,感觉还不错.然后又看到同类型的Filepond以及Dropzone.js,对比体验了一下,感觉都很优秀,但是在体验过程中,都遇到了 ...

  7. JavaScript 文件上传类型判断

    文件上传时用到一个功能,使用html元素的input标签实现, <input id="imageFile" name="imageFile1" accep ...

  8. HTML5 JavaScript 文件上传

    function fileUpload(targetUrl) { // 隐藏表单名称 var inputName = '_fileselect'; // 文件尺寸 this.fileSize = 0; ...

  9. 一款基于uploadify扩展的多文件上传插件，完全适用于Html5

    http://www.uploadify.com/documentation/  官网里面有两个插件,一个是要使用flash插件才能文件上传的插件,另外一个是不需要使用要flash插件的文件上传插件完 ...

随机推荐

  1. 如何用sublime 编写sass

    使用了Sublime Text也有一段时日了,然后在现在而言,小觉的coding工具已经非其莫属了,接着小觉因为近期忙着项目的原因,同时还要抽空编辑博客的原因,就暂时把它放在一旁了,现在偶然想起也就说 ...

  2. javascript学习目录

    类型系统 [1]基本数据类型 [2]引用类型中的对象Object [3]引用类型中的数组Array [4]引用类型中的时间Date [5]函数Function [6]正则表达式RegExp [7]包装 ...

  3. 2014牡丹江网络赛ZOJPretty Poem（暴力枚举）

    /* 将给定的一个字符串分解成ABABA 或者 ABABCAB的形式! 思路:暴力枚举A, B, C串! */ 1 #include<iostream> #include<cstri ...

  4. java中自动装箱的问题

    package wrapper; public class WrapperDemo { public static void main(String[] args) { Integer a=new I ...

  5. C++中typename关键字的用法

    我在我的 薛途的博客 上发表了新的文章,欢迎各位批评指正. C++中typename关键字的用法

  6. CSS3的学习--实现瀑布流

    基于CSS3实现瀑布流,使用CSS3的CSS 多栏(Multi-column). 可以到github上下载源码 : https://github.com/CraryPrimitiveMan/water ...

  7. 数据可视化(8)--D3数据的更新及动画

    最近项目组加班比较严重,D3的博客就一拖再拖,今天终于不用加班了,赶紧抽点时间写完~~ 今天就将D3数据的更新及动画写一写~~ 接着之前的博客写~~ 之前写了一个散点图的例子,下面可以自己写一个柱状图 ...

  8. Project简介

    Microsoft Project (Project)是一个国际上享有盛誉的通用的项目管理工具软件,凝集了许多成熟的项目管理现代理论和方法,可以帮助项目管理者实现时间.资源.成本的计划.控制,协助项目 ...

  9. 修改cdh5集群中主机节点IP或hostName

    前言 在使用cdh集群过程中,难免会因为某些不可抗拒的原因导致节点IP或hostName变动,而cm的监控界面无法完成这些事情,但是cm将集群中所有的主机的信息都存在postgresql数据库的hos ...

  10. JQuery02

    一:JQuery知识点 *:JQuery的dom操作 *:动态创建dom节点 比如动态创建表格等,在js里面进行完成. *删除节点 这里面的删除就是将其放在了一个地方,并不是真的删除,之后可以使用. ...