【精心推荐】几款极好的 JavaScript 文件上传插件-阿里云开发者社区

开发者社区> 秋天风景> 正文

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

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

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

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

作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Spring之Bean的生命周期详解
通过前面多个接口的介绍了解了Bean对象生命周期相关的方法,本文就将这些接口的方法串起来,来了解Bean的完整的生命周期。而介绍Bean的生命周期也是面试过程中经常会碰到的一个问题,如果不注意就跳坑里啦~~
3 0
关于自学django的服务器实践的体验
很多初学者想在服务器上实践自己的学习成果,却不知道如何入手,阿里云的开发者成长计划为我们开启了这个免费的体验机会,这对很多初学者来说是一个很好的实践平台,但其中还是有很多对于初学者不友好的因素,这是我第一次接触服务器,在这之前我并没有学过服务器怎么使用或者如何在服务器上部署自己开发的程序,以下是我遇到过的各种问题和解决方案。
6 0
Spring之InitializingBean接口和DisposableBean接口介绍
本文来介绍下InitializingBean接口和DisposableBean接口的作用
5 0
Spring之Bean对象的初始化和销毁方法
在Bean对象的完整的生命周期前我们还需要给大家介绍下Bean对象自身初始化及销毁的相关方法。
3 0
Spring之Aware接口介绍
在Bean对象的生命周期的方法中有好几个接口是Aware接口的子接口,所以弄清楚Aware接口对于理解Spring框架还是很有帮助的。
3 0
除了闹过腥风血雨的fastjson,你还知道哪些Java解析JSON的利器?(1)
除了闹过腥风血雨的fastjson,你还知道哪些Java解析JSON的利器?
4 0
除了闹过腥风血雨的fastjson,你还知道哪些Java解析JSON的利器?(2)
除了闹过腥风血雨的fastjson,你还知道哪些Java解析JSON的利器?
5 0
Java模板模式(template)
java23中设计模式中的模板模式是我们经常在框架源码中能看到的设计模式,所以本文就给大家来介绍下模板模式
3 0
Java装饰者模式(decorator)
文章目录 装饰者模式(decorator) 1.实现细节 2.案例演示 3.IO流实现细节 4.实际使用场景 5.总结
1 0
教妹学Java(五):Java程序在编译和运行时发生了什么
教妹学Java(五):Java程序在编译和运行时发生了什么
3 0
+关注
秋天风景
既然选择了远方,便只顾风雨兼程。
1516
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载