關於ajaxFileUpload造成 input[type=file] change事件只能觸發一次的問題
阿新 • • 發佈:2019-02-16
現在發現的問題
通過js繫結的input[type=file]
change
事件只能觸發一次
原因
該問題並不是由change事件失效造成的,而是ajaxFileUpload外掛造成的,它會把原來的file元素替換成新的file元素,所以之前繫結的change事件就失效了,需要重新繫結一下
除了重新繫結以外,如果是使用$fileInput.trigger('click')
方式,失效原因是$fileInput
仍指向舊元素,替代方案分為以下兩步
1. 首先將ajaxFileUpload原始碼中$(oldElement).clone()
(有些版本中為jQuery(oldElement).clone()
$(oldElement).clone(true)
這樣可以在複製元素的同時複製事件 2. 將
$fileInput.trigger('click')
改為 $('#id').trigger('click')
對保證新元素進行trigger而不是舊元素
如果你想要知道具體原因,請往下看
/**
* ajaxFileUpload原始碼
*/
// 原input[type=file]
var oldElement = $('#' + fileElementId);
// clone一份新元素 此處需要新增true為引數 即上文第一步所提到的 複製元素的同時複製事件
var newElement = $(oldElement).clone(true );
// 修改舊元素的id
$(oldElement).attr('id', fileId);
// 將新元素放在舊元素的位置
$(oldElement).before(newElement);
// 將舊元素移動到目標表單
$(oldElement).appendTo(form);
// 設定表單樣式
$(form).css('position', 'absolute');
$(form).css('top', '-1200px');
$(form).css('left', '-1200px');
$(form).appendTo('body');
所以提交完後 原來上傳的位置實際已經被newElement替代 但是如果在上傳之前就指定了變數指向原input[type=file] ,那麼上傳之後將依舊指向oldElement(其實已經在表單裡),此時trigger會生效,但是該元素實際已經被ajaxFileUpload所刪除 ,只存在於記憶體中,change事件似乎不會生效了(此處原因不詳,如果知曉請告訴我)