Javascript文件上传插件
这是最受欢迎的 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 是一个用于现代浏览器的开源的拖放上传插件,最大的特色是即时图片预览功能。
使用方法非常简单,只需添加 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); }); |
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 }); }); |
这个 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= "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)编辑文件名称
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= "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)显示图片缩略图
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= "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)限制文件上传数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<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 文件上传插件
文件上传功能作为网页重要的组成部分,几乎无处不在,从简单的单个文件上传到复杂的批量上传.拖放上传,需要开发者花费大量的时间和精力去处理,以期实现好用的上传功能.这篇文章向大家推荐几款很棒的 JavaS ...
- 几款极好的 JavaScript 文件上传插件
文件上传功能作为网页重要的组成部分,几乎无处不在,从简单的单个文件上传到复杂的批量上传.拖放上传,需要开发者花费大量的时间和精力去处理,以期实现好用的上传功能.这篇文章向大家推荐几款很棒的 JavaS ...
- 7 款基于 JavaScript/AJAX 的文件上传插件
本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1. jQuer ...
- 强大的支持多文件上传的jQuery文件上传插件Uploadify
支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...
- jQuery文件上传插件Uploadify(转)
一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5 ...
- Jquery-uploadify多文件上传插件使用介绍
Jquery-uploadify多文件上传插件使用起来非常的给力,在此记录一下使用方法. query-uploadify插件的属性设置 <script src="JS/jquery.m ...
- 20款最好的jQuery文件上传插件
当它是关于开发网络应用程序和网页的时候,文件上传功能的重要性是不容忽视的.一个文件上传功能可以让你上传所有类型的文件在网站上,包括视频,图像,文件和更多.创建一个文件上传功能,对你的网站是不是很难,有 ...
- 大文件上传插件webupload插件
版权所有 2009-2018荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...
- Uploadify多文件上传插件.NET使用案例+PHP使用案例
ploadify是一个非常好用的多文件上传插件 插件下载:http://www.uploadify.com 下载后需要用到的文件: 接下来就是直接添加代码: Default.aspx代码 <%@ ...
随机推荐
- Redis的两种数据持久化方式比较
RDB(Redis Database) 本质:基于时间点的快照 优点: 1.RDB格式文件体积小. 2.可以通过脚本执行bgsave(非阻塞)或者save(阻塞)命令自定义时间点进行备份. 3.可以保 ...
- 让Linux中的Nginx支持中文文件名
原文:https://blog.csdn.net/soeben/article/details/79525964 首先你的服务器需要安装了UTF-8字符集在命令行里输入env|grep LANG如果显 ...
- NLP学习(5)----attention/ self-attention/ seq2seq/ transformer
目录: 1. 前提 2. attention (1)为什么使用attention (2)attention的定义以及四种相似度计算方式 (3)attention类型(scaled dot-produc ...
- libpcap工具包使用go交叉编译开发android
命令使用 libpcap交叉编译 cd /tmpwget http://www.tcpdump.org/release/libpcap-1.8.1.tar.gztar xvf libpcap-1.8. ...
- Docker Hello-World镜像运行测试
一.命令:docker run hello-world 命令解释:以docker客户端命令的方式运行hello-world镜像 命令运行结果: hadoop@Docker:/opt/docker$ d ...
- 学习:VB之4C法
前言:4C法对于单纯的本地验证的话应该比较好使,但是基于网络验证可能就不是很好用了,尽管到了第二个窗口,功能应该还是不能用 逆向过程: 1.直接载入OD,发现第一条汇编指令如下 0040120C &g ...
- 【oracle】update 某字段为null
字段 = null 注意这个字段要可以为空
- css如何让父元素下的所有子元素高度相同
小颖最近做的项目中要实现一个样式 ,小颖怕自己忘记了,写个随笔记下来 需求父元素下有多个子元素,并且子元素过多时要实现自动换行,给每个子元素都加了右边框,而每个子元素里的内容多少不一定,这就会产生右边 ...
- Python之文件读写(csv文件,CSV库,Pandas库)
前言 一.Python文件读取 二.读取CSV文件 一.Python文件读取 1. open函数是内置函数之with操作 - 关于路径设置的问题斜杠设置成D:\\文件夹\\文件或是D:/文件夹/文件 ...
- Java 并发系列之六:java 并发容器(4个)
1. ConcurrentHashMap 2. ConcurrentLinkedQueue 3. ConcurrentSkipListMap 4. ConcurrentSkipListSet 5. t ...