jQuery file upload callback options
autoUpload
By default, files added to the widget are uploaded as soon as the user clicks on the start buttons. To enable automatic uploads, set this option to true.
- Type: boolean
- Default:
true
Please note that in the basic File Upload plugin, this option is set to true by default.
https://github.com/blueimp/jQuery-File-Upload/wiki/Options#callback-options
https://github.com/blueimp/jQuery-File-Upload/wiki/Options#processing-callback-options
Callback Options
All callbacks are of type function and can also be bound as event listeners, using the callback name plus "fileupload" as prefix:
$('#fileupload')
.bind('fileuploadadd', function (e, data) {/* ... */})
.bind('fileuploadsubmit', function (e, data) {/* ... */})
.bind('fileuploadsend', function (e, data) {/* ... */})
.bind('fileuploaddone', function (e, data) {/* ... */})
.bind('fileuploadfail', function (e, data) {/* ... */})
.bind('fileuploadalways', function (e, data) {/* ... */})
.bind('fileuploadprogress', function (e, data) {/* ... */})
.bind('fileuploadprogressall', function (e, data) {/* ... */})
.bind('fileuploadstart', function (e) {/* ... */})
.bind('fileuploadstop', function (e) {/* ... */})
.bind('fileuploadchange', function (e, data) {/* ... */})
.bind('fileuploadpaste', function (e, data) {/* ... */})
.bind('fileuploaddrop', function (e, data) {/* ... */})
.bind('fileuploaddragover', function (e) {/* ... */})
.bind('fileuploadchunkbeforesend', function (e, data) {/* ... */})
.bind('fileuploadchunksend', function (e, data) {/* ... */})
.bind('fileuploadchunkdone', function (e, data) {/* ... */})
.bind('fileuploadchunkfail', function (e, data) {/* ... */})
.bind('fileuploadchunkalways', function (e, data) {/* ... */});
Note: Adding additional event listeners via bind (or on method with jQuery 1.7+) method is the preferred option to preserve callback settings by the jQuery File Upload UI version.
add
The add callback can be understood as the callback for the file upload request queue. It is invoked as soon as files are added to the fileupload widget - via file input selection, drag & drop or add API call.
The data parameter allows to override plugin options as well as define ajax settings.
data.files holds a list of files for the upload request: If the singleFileUploads option is enabled (which is the default), the add callback will be called once for each file in the selection for XHR file uploads, with a data.files array length of one, as each file is uploaded individually. Else the add callback will be called once for each file selection.
The upload starts when the submit method is invoked on the data parameter.
data.submit() returns a Promise object and allows to attach additional handlers using jQuery's Deferred callbacks.
The default add callback submits the files if the autoUpload option is set to true (the default for the basic plugin).
It also handles processing of files before upload, if any process handlers have been registered.
Default:
需要注意的是,这里获取autoUpload是通过$(this).fileupload('option', 'autoUpload')
以下这段代码在jquery.fileupload.js中,这个add方法是options的成员
add: function (e, data) {
if (e.isDefaultPrevented()) {
return false;
}
var flag=(data.autoUpload !== false &&
$(this).fileupload('option', 'autoUpload'));
console.log(flag);
if (data.autoUpload || flag) {
data.process().done(function () {
data.submit();
});
}
Example:
function (e, data) {
$.each(data.files, function (index, file) {
console.log('Added file: ' + file.name);
});
data.url = '/path/to/upload/handler.json';
var jqXHR = data.submit()
.success(function (result, textStatus, jqXHR) {/* ... */})
.error(function (jqXHR, textStatus, errorThrown) {/* ... */})
.complete(function (result, textStatus, jqXHR) {/* ... */});
}
done
Callback for successful upload requests.
This callback is the equivalent to the success callback provided by jQuery ajax()
and will also be called if the server returns a JSON response with an error property.
always
Callback for completed (success, abort or error) upload requests.
This callback is the equivalent to the complete callback provided by jQuery ajax().
Troubleshooting
下面这种写法有问题,会导致jquery.fileupload-process.js中的options[add]无法触发,原因是被覆盖了。
https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload-process.js#L54
$(function () {
$('#fileupload').fileupload({
dataType: 'json',
add: function (e, data) {
data.context = $('<button/>').text('Upload')
.appendTo(document.body)
.click(function () {
data.context = $('<p/>').text('Uploading...').replaceAll($(this));
data.submit();
});
},
done: function (e, data) {
data.context.text('Upload finished.');
}
});
});
autoUpload设置为false,不工作
发现问题是,在自定义的add的handler中,调用了data.submit();
直接注释那段代码就可以了
jQuery file upload callback options的更多相关文章
- jQuery File Upload 单页面多实例的实现
jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...
- jQuery file upload cropper的流程
https://tkvw.github.io/jQuery-File-Upload/basic-plus-editor.html 最开始初始化jquery.ui.widget.js中的factory( ...
- jQuery File Upload done函数没有返回
最近在使用jQuery File Upload 上传图片时发现一个问题,发现done函数没有callback,经过一番折腾,找到问题原因,是由于dataType: ‘json’造成的,改为autoUp ...
- jQuery File Upload
jQuery File Upload介绍.............................................. 2 实现基本原理......................... ...
- jQuery File Upload 插件 php代码分析
jquery file upload php代码分析首先进入构造方法 __construct() 再进入 initialize()因为我是post方式传的数据 在进入initialize()中的po ...
- jQuery File Upload blueimp with struts2 简单试用
Official Site的话随便搜索就可以去了 另外新版PHP似乎都有问题 虽然图片都可以上传 但是response报错 我下载的是8.8.7木有问题 但是8.8.7版本结合修改main. ...
- 定制jQuery File Upload为微博式单文件上传
日志未经声明,均为AlloVince原创.版权采用『 知识共享署名-非商业性使用 2.5 许可协议』进行许可. jQuery File Upload是一个非常优秀的上传组件,主要使用了XHR作为上传方 ...
- 用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮
需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为 ...
- jquery file upload 文件上传插件
1. jquery file upload 下载 jquery file upload Demo 地址:https://blueimp.github.io/jQuery-File-Upload/ jq ...
随机推荐
- url简单加密
使用urlencode和urldecode可以对传输的字符串进行简单的加密,也可用于将汉字转换为16进制数字进行传输,每个16进制数前面都带一个% urlencode : 将中文转换为16进制数 ur ...
- linux相关命令大全......持续更新
启动项目8080端口被占用,然而老久没玩Linux,命令忘光了,杀死进程都不记得了. 决定整理一波吧....... Linux: sudo强制执行,不在root用户下时使用. top 相当于windo ...
- ABAP JSON转换
REPORT ztest_json. DATA: json_ser TYPE REF TO cl_trex_json_serializer, json_des TYPE REF TO zcl_trex ...
- join 与 countdownlatch 的区别 扩展 栅栏 CyclicBarrier
我们先看一个 小例子 , 使用 join 与CountDownSlatch 都可以完成 当1,2线程 完全结束后 3 线程 start 对比我们就能够知道 CountDownSlatch 比 JOIN ...
- time、date、datetime、timestamp和year
在此声明mysql数据库 时间上总共有五中表示方法:它们分别是 time.date.datetime.timestamp和year. time : “hh:mm:ss”格式表示的时间值,格式显示TIM ...
- MapUtils
一. package com.wang.utils; import java.util.HashMap; import java.util.Map; import java.util.Set; pub ...
- Vue Cli 移动端开发
一.
- 007-SaltStack之修改salt-minion id
1. 需求背景 之前使用saltstack添加的主机默认使用了hostname作为salt-minion id,而主机名如果没有做规范和规划,是比较难区分属于什么业务或者机器的.我们需要修改salt- ...
- Codeforces 989 P循环节01构造 ABCD连通块构造 思维对云遮月参考系坐标轴转换
A 直接判存不存在连续的三个包含A,B,C就行 /*Huyyt*/ #include<bits/stdc++.h> #define mem(a,b) memset(a,b,sizeof(a ...
- JVM metaspace元空间
元空间的本质和永久代类似,都是对JVM规范中方法区的实现. 元空间不在虚拟机中,而是使用本地内存. 用于元空间的JVM参数: -XX:MetaspaceSize=N 初始化Metaspace大小, ...