設置的onchange只能執行一次的解決方案

項目中有一個圖片上傳、查看插件,但該插件只能執行一次上傳操作,下次上傳需重新刷新頁面,很是不方便。
通過查閱相關資料發現,$(‘# ‘).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);" />'); 圖片便可以多次上傳。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章