【精心推荐】几款极好的 JavaScript 文件上传插件
文件上传功能作为网页重要的组成部分，几乎无处不在，从简单的单个文件上传到复杂的批量上传、拖放上传，需要开发者花费大量的时间和精力去处理，以期实现好用的上传功能。这篇文章向大家推荐几款很棒的 JavaScript 文件上传功能增强插件。
这是最受欢迎的 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 是一个用于现代浏览器的开源的拖放上传插件，最大的特色是即时图片预览功能。
使用方法非常简单，只需添加 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 有两个版本，HTML5 方法上传版本和传统的 Flash 上传。支持高度自定义，可以完美的继承到你的网站中。
Flash 版本兼容性好，使用示例：
$(function() {
$("#file_upload_1").uploadify({
height : 30,
swf : '/uploadify/uploadify.swf',
uploader : '/uploadify/uploadify.php',
width : 120
});
});
这个 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 文件上传插件的更多相关文章
- 几款极好的 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 ...
- 体验三大JavaScript文件上传库（Uppy.js/Filepond/Dropzone）
最近发现了一个高颜值的前端上传组件Uppy.js,立即上手体验了一波,感觉还不错.然后又看到同类型的Filepond以及Dropzone.js,对比体验了一下,感觉都很优秀,但是在体验过程中,都遇到了 ...
- JavaScript 文件上传类型判断
文件上传时用到一个功能,使用html元素的input标签实现, <input id="imageFile" name="imageFile1" accep ...
- HTML5 JavaScript 文件上传
function fileUpload(targetUrl) { // 隐藏表单名称 var inputName = '_fileselect'; // 文件尺寸 this.fileSize = 0; ...
- 一款基于uploadify扩展的多文件上传插件，完全适用于Html5
http://www.uploadify.com/documentation/ 官网里面有两个插件,一个是要使用flash插件才能文件上传的插件,另外一个是不需要使用要flash插件的文件上传插件完 ...
随机推荐
- 找到SQL Server数据库历史增长信息
很多时候,在我们规划SQL Server数据库的空间,或向存储方面要空间时,都需要估算所需申请数据库空间的大小,估计未来最简单的办法就是看过去的趋势,这通常也是最合理的方式. 通常来讲 ...
- Locations Section of OpenCascade BRep
Locations Section of OpenCascade BRep eryar@163.com 摘要Abstract:本文结合OpenCascade的BRep格式描述文档和源程序,对BRep格 ...
- 冒泡排序java代码
冒泡排序就是依次取出最大数,然后依次交换放到数组最后边. 直观写法: public long[] sort(long[] a){ int n = a.length - 1; // Step:1 选出最 ...
- 深入理解CSS浮动
× 目录 [1]定义 [2]特性 [3]表现 [4]重叠 前面的话 浮动最早的使用是出自<img src="#" align="right">,用于 ...
- JSP网站开发基础总结《七》
按照计划本篇将为大家总结搜索功能的两种实现:确定搜索与模糊搜索.所谓精确搜索便是指,根据用户的输入的搜索内容,在数据库中寻找具有一一对应的关系的数据,一般都是用户在数据库中的主键值.而模糊搜索,是一种 ...
- (扩展欧几里德算法)zzuoj 10402: C.机器人
10402: C.机器人 Description Dr. Kong 设计的机器人卡尔非常活泼,既能原地蹦,又能跳远.由于受软硬件设计所限,机器人卡尔只能定点跳远.若机器人站在(X,Y)位置,它可以原地 ...
- mysql 命令重命名表RENAME TABLE 句法
mysql 命令重命名表RENAME TABLE 句法 RENAME TABLE tbl_name TO new_tbl_name[, tbl_name2 TO new_tbl_name2,...]更 ...
- RMAN备份注意事项
1.建议最好打开控制文件的自动备份. 2.如果没有打开控制文件的自动备份,一定注意备份的顺序,无论之前有无备份控制文件,备份全库以及归档之后,在最后一定要再次备份控制文件. 3.使用%U,或者%d%T ...
- selenium-webdriver(python) (十三) -- cookie处理
本节重点: driver.get_cookies() 获得cookie信息 add_cookie(cookie_dict) 向cookie添加会话信息 delete_cookie(name) 删 ...
- Ionic2学习笔记（1）：新建一个页面
作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5532323.html 新建一个页面: 借上一篇中的HelloWorl ...