今天在对前端页面改造时发现系统使用的文件上传是采用了jquery-file-upload，并且还采用了UI的模板引擎的写法，下面直接附上代码吧
<script id="template-upload" type="text/x-tmpl">
{%
for (var i=0, file; file=o.files[i]; i++) {
%}
<tr class="template-upload fade">
<td></td>
<td>
<p class="name">{%=file.name%}</p>
<strong class="error text-danger"></strong>
</td>
<td>
<p class="size">Processing...</p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
</td>
<td>
<input name="filePage{%=file.name%}" type="text" style="width:30px" class="easyui-validatebox" data-options="required:true"/>
</td>
<td>
<span></span>
</td>
<td>
<span></span>
</td>
<td>
{% if (!i && !o.options.autoUpload) { %}
<button class="btn btn-primary start" disabled>
<i class="glyphicon glyphicon-upload"></i>
<span>上传</span>
</button>
{% } %}
{% if (!i) { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>取消</span>
</button>
{% } %}
</td>
</tr>
{% } %}
{%resizeIframe(100);%}
</script>
<%-- The template to display files available for download --%>
<script id="template-download" type="text/x-tmpl">
{%
for (var i=0, b=o, file; file=o.files[i]; i++) {
%}
<tr class="template-download fade">
<td>{%=file.tradeId%}</td>
<td>
<p class="name">
{% if (file.download) { %}
<a href="<%=basePath%>{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
{% } else { %}
<span>{%=file.name%}</span>
{% } %}
</p>
{% if (file.error) { %}
<div><span class="label label-danger">Error</span> {%=file.error%}</div>
{% } %}
</td>
<td>
<span class="size">{%=o.formatFileSize(file.size)%}</span>
</td>
<td>
<span class="size">{%=file.filePage%}</span>
</td>
<td>
<span class="size">{%=file.createTime%}</span>
</td>
<td>
<span class="size">{%=file.createUserName%}</span>
</td>
<td>
{% if (userId == file.createUserId && (file.deleted|| file.thumbnailUrl=='1')) { %}
<button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="../../../{%=file.deleteUrl+'?status=${param.deleteStatus}'%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
<i class="glyphicon glyphicon-trash"></i>
<span>删除</span>
</button>
<input type="checkbox" name="delete" value="1" class="toggle">
{% } else {
if(file.error){
%}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>取消</span>
</button>
{%} } %}
</td>
</tr>
{% } %}
</script>
使用上面这种方式，我在上传文件成功之后，竟然一下子没有找到回调函数，贼尴尬，最后看到一个大佬的博客，在jquery.fileupload-ui.js中成功找到我想要的东西
下面这个是上传成功的回调函数
// Callback for successful uploads: 上传成功后
done: function (e, data) {
if (e.isDefaultPrevented()) {
return false;
}
var that = $(this).data('blueimp-fileupload') ||
$(this).data('fileupload'),
getFilesFromResponse = data.getFilesFromResponse ||
that.options.getFilesFromResponse,
files = getFilesFromResponse(data),
template,
deferred;
if (data.context) { //如果不是上传文件，data.context是没有内容的
//如果是上传成功的回调函数
fallBack();
data.context.each(function (index) {
var file = files[index] ||
{error: 'Empty file upload result'};
deferred = that._addFinishedDeferreds();
that._transition($(this)).done(
function () {
var node = $(this);
template = that._renderDownload([file])
.replaceAll(node);
that._forceReflow(template);
that._transition(template).done(
function () {
data.context = $(this);
that._trigger('completed', e, data);
that._trigger('finished', e, data);
deferred.resolve();
}
);
}
);
});
} else {//文件数据展示时走的是这个
template = that._renderDownload(files)[
that.options.prependFiles ? 'prependTo' : 'appendTo'
](that.options.filesContainer);
that._forceReflow(template);
deferred = that._addFinishedDeferreds();
that._transition(template).done(
function () {
data.context = $(this);
that._trigger('completed', e, data);
that._trigger('finished', e, data);
deferred.resolve();
}
);
}
},
下面这个是文件删除时的回调函数
// Callback for file deletion: 删除文件时
destroy: function (e, data) {
if (e.isDefaultPrevented()) {
return false;
}
//删除成功的回调函数
fallBack();
var that = $(this).data('blueimp-fileupload') ||
$(this).data('fileupload'),
removeNode = function () {
that._transition(data.context).done(
function () {
$(this).remove();
that._trigger('destroyed', e, data);
}
);
};
if (data.url) {
data.dataType = data.dataType || that.options.dataType;
$.ajax(data).done(removeNode).fail(function () {
that._trigger('destroyfailed', e, data);
});
} else {
removeNode();
}
}
},
那个 fallBack()函数是我自己写的一个回调函数，由于我这边的文件上传页面是内嵌在一个iframe标签中，所以我这边的回调函数是需要调用父页面的一个方法来实现的，下面这个方法是写在子页面中
function fallBack(){
parent.fileUploadInit();//直接调用父页面的一个方法来实现自己的逻辑
}