文件上传功能作为网页重要的组成部分，几乎无处不在，从简单的单个文件上传到复杂的批量上传、拖放上传，需要开发者花费大量的时间和精力去处理，以期实现好用的上传功能。这篇文章向大家推荐几款很棒的 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="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="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="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="jquery.fineuploader-{VERSION}.js"></script>
<script>
  $(document).ready(function() {
    $('#filelimit-fine-uploader').fineUploader({
      request: {
        endpoint: 'server/success.html'
      },
      validation: {
        itemLimit: 3
      }
    });
  });
</script>

　　插件下载      在线演示

几款极好的 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. 一款基于uploadify扩展的多文件上传插件，完全适用于Html5

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

  7. js插件---IUpload文件上传插件（包括图片）

    js插件---IUpload文件上传插件(包括图片) 一.总结 一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...

  8. jQuery文件上传插件Uploadify（转）

    一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5 ...

  9. 强大的支持多文件上传的jQuery文件上传插件Uploadify

    支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...

随机推荐

  1. PHP基础班初学心得：用JQ实现表单的全选、反选、取消和删除功能

    摘要: 本人刚参加PHP基础班培训,由于之前毫无基础,分享的心得可能不规范,方法也许也"旁门左道",不能保证质量,只作自己总结学习,也希望能帮助到同样是初学者的朋友们,共同进步. ...

  2. 170104、js内置对象与原生对象

    内置对象与原生对象 内置(Build-in)对象与原生(Naitve)对象的区别在于:前者总是在引擎初始化阶段就被创建好的对象,是后者的一个子集:而后者包括了一些在运行过程中动态创建的对象. 原生对象 ...

  3. 基于bootstrap + php +ajax datatable 插件的使用

    Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 下面是我学习datatables写的一个服务器端(php)分页例子,该功能包含的功能 ...

  4. [转]opencv3.0 鱼眼相机标定

    [原文转自]:http://blog.csdn.net/qq_15947787/article/details/51441031 前两天发表的时候没注意,代码出了点错误,所以修改了一下,重新发上来.  ...

  5. web项目 log4j2的路径问题

    项目中用到log4j2记录日志,结果运行的时候总也不见log文件的产生. 查看官方文档得知,在web项目中使用log4j2需要加入log4j-web包 log4j2.xml <?xml vers ...

  6. IOS 创建渐变图层

    代码如下 typedef enum { GradientLayerKindLeftRight = , GradientLayerKindUpDown, GradientLayerKindLBRT,// ...

  7. IOS textView获取光标定位，以及选中

    当textview成为第一响应者的时候就会调用一个协议方法 - (void)textViewDidChangeSelection:(UITextView *)textView; 在这个协议方法中可以实 ...

  8. const、static和extern的正确使用方式

    我们在看一些大牛的第三方时,里面会出现很多const.static和extern,尤其是const和static,const和extern的结合使用,直接令很多小伙伴懵逼了,今天就详细讲解一下这三个关 ...

  9. Manthan, Codefest 16 -A Ebony and Ivory

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...

  10. iOS runtime实用篇解决常见Crash

    程序崩溃经历 其实在很早之前就想写这篇文章了,一直拖到现在. 程序崩溃经历1 平时开发测试的时候好好的,结果上线几天发现有崩溃的问题,其实责任大部分在我身上. 我的责任: 过分信赖文档,没进行容错处理 ...