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 onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 Javascript
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
jquery 学习之二 属性(类)
Nov 25 Javascript
jQuery的学习步骤
Feb 23 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
基于JS实现一个随机生成验证码功能
May 29 Javascript
vue 开发之路由配置方法详解
Dec 02 Javascript
Vue3 Composition API的使用简介
Mar 29 Vue.js
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代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
Python入门篇之对象类型
2014/10/17 Python
Django中处理出错页面的方法
2015/07/15 Python
python版学生管理系统
2018/01/10 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
Reebonz中国官网:新加坡奢侈品购物网站
2017/03/17 全球购物
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
机械加工与数控专业自荐书
2014/06/04 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
2014年协会工作总结
2014/11/22 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
python 爬取吉首大学网站成绩单
2021/06/02 Python
Python必备技巧之字符数据操作详解
2022/03/23 Python
Golang gRPC HTTP协议转换示例
2022/06/16 Golang