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

插件下载      在线演示

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）手动触发上传

<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="http://code.jquery.com/jquery-latest.js"></script>

<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）编辑文件名称

<!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）自定义选项

<div id="restricted-fine-uploader"></div>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<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）显示图片缩略图

<div id="thumbnail-fine-uploader"></div>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<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）限制文件上传数

<div id="filelimit-fine-uploader"></div>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<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 文件上传插件

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

【精心推荐】几款极好的 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. Redis安装配置与Jedis访问数据库

    一.NOSQL概要 NoSQL(NoSQL = Not Only SQL ),意即“不仅仅是SQL”,泛指非关系型的数据库.NoSQL数据库的四大分类 键值(Key-Value)存储数据库 这一类数据 ...

  2. modern.IE – Web 开发必备的 IE 浏览器测试工具

    modern.IE 是微软推出的一个开发人员中心,提供免费的工具和资源,旨在使您能够花更少的时间来测试各种版本的 Internet Explorer,并留出更多时间在现代 Web 上构建重要的内容.m ...

  3. 关注经典：CSS Awards 获奖网站作品赏析《第一季》

    每天都有很多新的网站推出,其中不乏一些设计极其优秀的作品.这个系列的文章,我为大家挑选了2012年赢得 CSS Awards 大奖的50个最佳网站.这些鼓舞人心的网站作品代表了网页设计的最高水平,相信 ...

  4. 微信小程序中rpx与rem单位使用

    原作者: 小小小   来自: 授权地址 本文讲解rpx和rem应用于微信小程序,如果你还没有入门,建议先从下面看起: 微信小程序官方文档web app变革之remrpx单位官方文档rpx单位基础介绍 ...

  5. [git]merge和rebase的区别

    前言 我从用git就一直用rebase,但是新的公司需要用merge命令,我不是很明白,所以查了一些资料,总结了下面的内容,如果有什么不妥的地方,还望指正,我一定虚心学习. merge和rebase ...

  6. 天气webservices

    Web现状 Web服务 概念 具有web服务 构成 UDDI WSDL 天气预报 web服务现状     记的以前看VB.NET时中间就介绍了WSDL,而今又学到web服务,所以用天气预报的实例学习一 ...

  7. 在这个变化的年代，IT人的方向在哪里？看两个故事

    王超是我的朋友,来京四年整.最初在一家民企做LINUX运维工程师,月薪5000.工作很认真,埋头苦干型,每天工作时间很长,让加班从来无怨言.即使是周末休假,只要有工作任务也是随叫随到.然而当他提涨薪时 ...

  8. ansible写一个简单的playbook

    前言 实现的功能很简单,就是通过ansible批量完成某个账户sudo权限的开通或关闭 目录结构 ├── group_vars #放置各种变量的目录,我这里没用 ├── hosts #主机和组配置,默 ...

  9. JS魔法堂：jQuery.Deferred(jQuery1.5-2.1)源码剖析

    一.前言 jQuery.Deferred作为1.5的新特性出现在jQuery上,而jQuery.ajax函数也做了相应的调整.因此我们能如下的使用xhr请求调用,并实现事件处理函数晚绑定. var p ...

  10. Centos6.5 python升级成2.7版本出现的一些问题解决方法

    由于功能及程序依赖,需要将Centos上的python从2.6升级成2.7,把碰到的一些问题记录如下: 安装好2.7后将原来的/usr/bin/python改成/usr/bin/python26,并将 ...