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 相关文章推荐
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 Javascript
Node.js复制文件的方法示例
Dec 29 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
vue.js开发环境搭建教程
May 04 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
微信小程序canvas拖拽、截图组件功能
Sep 04 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 Javascript
JS常见错误(Error)及处理方案详解
Jul 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
python私有属性和方法实例分析
2015/01/15 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
python 画函数曲线示例
2019/12/04 Python
Python实现EM算法实例代码
2020/10/04 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
列车长先进事迹材料
2014/01/25 职场文书
客服部班长工作责任制
2014/02/25 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
公司开除员工通知
2015/04/22 职场文书
自书遗嘱范文
2015/08/07 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js