今天在對前端頁面改造時發現系統使用的文件上傳是採用了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();//直接調用父頁面的一個方法來實現自己的邏輯
}