項目中有一個圖片上傳、查看插件,但該插件只能執行一次上傳操作,下次上傳需重新刷新頁面,很是不方便。
通過查閱相關資料發現,$(‘# ‘).replaceWith方法可以上述問題。
HTML腳本如下:
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right">圖標/label>
<div class="col-sm-9">
<input id="icon" name="icon" type="text" class="col-xs-10 col-sm-8""/>
<div style="display: none;">
<input id="icon_id" type="file" name="files" data-target="[name=icon]" url="<%=path %>/fileUpload/upload.action" οnchange="frame.upload(this);" />
</div>
<input type="button" class="btn-primary" style="height: 30px" value="上傳" οnclick="javaScript:$('#icon_id').click();" />
<input type="button" class="btn-primary" style="height: 30px" value="下載" οnclick="javascript:openUrl('icon');" />
</div>
</div>
js腳本如下:
frame.upload = function(el) {
var id = $(el).attr('id');
var url = $(el).attr('url');
var target = $(el).attr('data-target');
var bind = $(el).attr('bind-img');
var cb = $(el).attr('frame-cb');
var name = $(el).attr('name') || 'files';
var waitText = $(el).attr('waitText') || '正在上傳,請稍候...';
$(target).prop('disabled', true).val(waitText);
var c = $(bind).attr('src');
$(bind).attr('src', 'data:image/png;base64,R0lGOOw==');
$(el).upload(url,
function(data) {
console.debug(data);
try {
var d = $.parseJSON(data);
if (d.success) {
var dt = d.data[name];
c = dt.url || c;
showMsg("提示", "info", dt.msg);
}
if ( !! cb) {
cb(d);
}
$(bind).attr('src', c);
$(target).prop('disabled', false).val(c);
$('#' + id).replaceWith('<input id="' + id + '" type="file" name="files" data-target="' + target + '" url="' + url + '" οnchange="frame.upload(this);" />');
} catch(e) {
$.tip('上傳失敗,服務器異常!' + e, false);
}
});
};
每次圖片上傳成功後,執行$('#' + id).replaceWith('<input id="' + id + '" type="file" name="files" data-target="' + target + '" url="' + url + '" onchange="frame.upload(this);" />');
圖片便可以多次上傳。