几款极好的 JavaScript 文件上传插件
文件上传功能作为网页重要的组成部分,几乎无处不在,从简单的单个文件上传到复杂的批量上传、拖放上传,需要开发者花费大量的时间和精力去处理,以期实现好用的上传功能。这篇文章向大家推荐几款很棒的 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); });<span style= "line-height: 1.5" > </span> |
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 = "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 = "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 文件上传插件的更多相关文章
- 【精心推荐】几款极好的 JavaScript 文件上传插件
文件上传功能作为网页重要的组成部分,几乎无处不在,从简单的单个文件上传到复杂的批量上传.拖放上传,需要开发者花费大量的时间和精力去处理,以期实现好用的上传功能.这篇文章向大家推荐几款很棒的 JavaS ...
- Javascript文件上传插件
jQuery File Uploader 这是最受欢迎的 jQuery 文件上传组件,支持批量上传,拖放上传,显示上传进度条以及校验功能. 支持预览图片.音频和视频,支持跨域上传和客户端图片缩放,支持 ...
- 7 款基于 JavaScript/AJAX 的文件上传插件
本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助. 1. jQuer ...
- 20款最好的jQuery文件上传插件
当它是关于开发网络应用程序和网页的时候,文件上传功能的重要性是不容忽视的.一个文件上传功能可以让你上传所有类型的文件在网站上,包括视频,图像,文件和更多.创建一个文件上传功能,对你的网站是不是很难,有 ...
- 7款js文件上传插件
1. jQuery File Upload 具有多文件上传.拖拽.进度条和图像预览功能的文件上传插件,支持跨域.分块.暂停恢复和客户端图像缩放.可与任何服务端平台(如PHP.Python.Ruby ...
- 一款基于uploadify扩展的多文件上传插件,完全适用于Html5
http://www.uploadify.com/documentation/ 官网里面有两个插件,一个是要使用flash插件才能文件上传的插件,另外一个是不需要使用要flash插件的文件上传插件完 ...
- js插件---IUpload文件上传插件(包括图片)
js插件---IUpload文件上传插件(包括图片) 一.总结 一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...
- jQuery文件上传插件Uploadify(转)
一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5 ...
- 强大的支持多文件上传的jQuery文件上传插件Uploadify
支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...
随机推荐
- ZwQuerySystemInformation 安全使用心得 Delphi 版
作为 DELPHI 版本,需要引用 jwaNative, JwaWinType ,他们是 JEDI API 的一部分.JEDI 官网有下载. 先给出 2 个辅助函数 和 一些结构体. type ...
- VS2013打开项目Web加载失败
今天打开一个好久没打开过的老项目,发现web加载失败,如图: 然后重新加载项目,提示: 一开始直接在网上找答案,结果看的答案都不靠谱,只好自己动手了, 先看了 这里面是基础配置:大概看过后,又去看了提 ...
- qt qml fuzzyPanel 毛玻璃效果
毛玻璃效果,用qml来写代码真是简短,大爱qml:) [下载地址]http://download.csdn.net/detail/surfsky/8426641 [核心代码] Rectangle{ c ...
- ftp发送文件
#!/bin/bash #author:luyongjin IP=220.250.65.22 USERNAME='ftp_hangye20' PASSWORD='oUo2JD7oK#u-epw' #D ...
- android ViewPager使用遇到的问题
项目需求是需要实现一个有两页可滑动的界面,就想到了使用ViewPager,在实现是没有深入考虑,就直接使用了PagerAdapter,页面是正常实现了,可是发现无法流畅的刷新页面(直接使用notify ...
- 使用AFNetWorking 实现以Basic Authentication方式获取access-token
由于服务器端对于调用API获取数据接口进行了限制,需要在调用API之前获取一个access-token,所以需要在iOS里实现获取这个access-token的功能. 服务器端是在ASP.NET中基于 ...
- SVN服务器搭建和使用(一)
SVN服务器搭建和使用(一) Subversion是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说. 首先来下载和搭建SVN服务器. 现在Subversion已经迁移到apache网站上 ...
- jquery学习方法
http://www.runoob.com/jquery/jquery-tutorial.html jQuery 语法 通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行 ...
- 修改C:\WINDOWS\system32\drivers\etc\hosts 文件有什么作用
host是一个没有扩展名的系统文件,可以用记事本等工具打开,其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联"数据库",当用户在浏览器中输入一个需要登录的网址时,系统会 ...
- UE4 使用UGM制作血条
声明:本文是自己做的项目,可能不是最好的方法,或有错误使用方式.各位不喜勿喷! HP进度 HP背景 将上面的资源拖到UE4中(使用UE4自带的颜色也可实现效果,具体参考官方教程 https://doc ...