jQuery File Upload文件上传插件使用详解


Posted in Javascript onDecember 06, 2016

 jQuery File Upload 是一个Jquery文件上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。

官网链接:https://github.com/blueimp/jQuery-File-Upload/wiki

特点:拖放支持;上传进度条;图像预览;可定制和可扩展的;兼容任何服务器端应用平台(PHP, Python, Ruby on Rails, Java, Node.js, Go etc.)。

使用方法:

1. 需要加载的js文件:

jquey-1.8.3.min.js

jquery-ui-widget.js

jquery.iframe-transport.js

jquery.fileupload.js

2. html代码:

<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>

3. js代码:

$(function () {
$('#fileupload').fileupload({
dataType: 'json',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});

3.1 显示上传进度条: 

 $('#fileupload').fileupload({
progressall: function (e, data) {

var progress = parseInt(data.loaded / data.total * 100, 10);

$('#progress .bar').css(

'width',

progress + '%'

);

}

});

3.2 需要一个<div>容器用来显示进:

 <div id="progress">
<div class="bar" style="width: 0%;"></div>

</div>

4. API

4.1 Initialization:

在上传按钮上调用fileupload()方法;

示例:

$('#fileupload').fileupload();

4.2 Options :

1: url:请求发送的目标url

Type: string

Example: '/path/to/upload/handler.json'

2.Type: 文件上传HTTP请求方式,可以选择“POST”,“PUT”或者"PATCH",

默认"POST"

Type: string

Example: 'PUT'

3. dataType:希望从服务器返回的数据类型,默认"json"

Type: string

Example: 'json'

4. autoUpload:默认情况下,只要用户点击了开始按钮被添加至组件的文件会立即上传。将autoUpload值设为true可以自动上传。

Type: boolean

Default: true

5. acceptFileTypes:允许上传的的文件类型

Example: /(\.|\/)(gif|jpe?g|png|xlsx)$/i

6. maxFileSize: 最大上传文件大小

Example: 999000 (999KB) //单位:B

7. minFileSize:最小上传文件大小

Example: 100000 (100KB) //单位:B

8.previewMaxWidth : 图片预览区域最大宽度

Example: 100 //单位:px

4.3 Callback Options:

使用方法一:函数属性

实例:

$('#fileupload').fileupload({
drop: function (e, data) {

$.each(data.files, function (index, file) {

alert('Dropped file: ' + file.name);

});

},

change: function (e, data) {

$.each(data.files, function (index, file) {

alert('Selected file: ' + file.name);

});

}

});

使用方法二:绑定事件监听函数

实例:

$('#fileupload')

.bind('fileuploaddrop', function (e, data) {/* ... */})


.bind('fileuploadchange', function (e, data) {/* ... */});

每个事件名称都添加前缀:”fileupload”;

注意推荐使用第二种方法。

常用的回调函数:

1. add: 当文件被添加到上传组件时被触发

$('#fileupload').bind('fileuploadadd', function (e, data) {/* ... */});

或者$('#fileupload').on('fileuploadadd', function (e, data) {/* ... */});

2. processalways: 当一个单独的文件处理队列结束(完成或失败时)触发

3. progressall: 全局上传处理事件的回调函数

Example:

$('#fileupload').on('fileuploadprogressall', function (e, data) { //进度条显示
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progress .progress-bar').css(
'width',
progress + '%'
);
});

4. fail : 上传请求失败时触发的回调函数,如果服务器返回一个带有error属性的json响应这个函数将不会被触发。

5. done : 上传请求成功时触发的回调函数,如果服务器返回一个带有error属性的json响应这个函数也会被触发。

6. always : 上传请求结束时(成功,错误或者中止)都会被触发。

以上所述是小编给大家介绍的jQuery File Upload文件上传插件使用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery 扩展方法
May 06 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
js 回车提交表单两种实现方法
Dec 31 Javascript
JavaScript数组常用操作技巧汇总
Nov 17 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
使用Sonarqube扫描Javascript代码的示例
Dec 26 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
实用的Vue开发技巧
May 30 Javascript
用Golang运行JavaScript的实现示例
Nov 25 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
vue2.0开发实践总结之入门篇
Dec 06 #Javascript
微信小程序中单位rpx和rem的使用
Dec 06 #Javascript
JavaScript定时器实现的原理分析
Dec 06 #Javascript
原生js实现弹出层登录拖拽功能
Dec 05 #Javascript
详解Vue.js——60分钟组件快速入门(上篇)
Dec 05 #Javascript
原生js编写基于面向对象的分页组件
Dec 05 #Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 #Javascript
You might like
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
CI(CodeIgniter)框架介绍
2014/06/09 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
php远程下载类分享
2016/04/13 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
Python设计模式之观察者模式实例
2014/04/26 Python
详解Python函数作用域的LEGB顺序
2016/05/14 Python
简单了解python单例模式的几种写法
2019/07/01 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
建筑工程材料员岗位职责
2015/04/11 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
python中取整数的几种方法
2021/11/07 Python
httpclient调用远程接口的方法
2022/08/14 Java/Android