如何讓file input能夠實現置空和【非同步】上傳後相同檔案的再次選擇觸發change
阿新 • • 發佈:2019-01-07
file input出於安全形度,是不允許賦值的,即使是置空,雖然通過給outerHtml賦值可以清空,但貌似僅在ie下起使用。
因為缺少置空的方法,使用者非同步上傳完畢檔案後選擇相同檔案時,不會觸發change,因為在這種情況下,我們沒有辦法使value(也就是檔案路徑)發生變化。
那難道就無解了麼。。當然不是。。
我的解決方法是,每次選完檔案,就重建此元素,這樣值自然是空的,因為clone不帶值,這樣就是一個全新的file input,每一次選擇,自然各種正常。以下是關鍵程式碼:
?1 2 3 4 |
< label
id="realBtn" class="btn btn-info"> < input
type="file" id="fileInput1" name="file" class="mFileInput" style="left:-9999px;position:absolute;">
< span >匯入EXCEL資料</ span >
</ label >
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
function
uploadfile(eventP) {
var
files = eventP.target.files;
if
(files.length == 0) {
showMsg( "請選擇檔案" );
return ;
}
$( ".loadingTxt1" ).hide().html( "正在上傳並生成預覽
..." ).fadeIn(200);
var
xhr = false ;
try
{
xhr =
new
XMLHttpRequest(); //嘗試建立 XMLHttpRequest 物件,除 IE 外的瀏覽器都支援這個方法。
}
catch
(e) {
xhr = ActiveXobject( "Msxml12.XMLHTTP" ); //使用較新版本的
IE 建立 IE 相容的物件(Msxml2.XMLHTTP)。
}
if
(xhr.upload) {
// 檔案上傳成功或是失敗
xhr.onreadystatechange =
function
(e) {
if
(xhr.readyState == 4) {
if
(xhr.status == 200) {
var
data = JsonTool.parse(xhr.responseText)
if
(data.result == "Success" ) {
$( ".loadingTxt1" ).hide().html( "本次上傳資料
" + data.msg.length + " 條。" ).fadeIn(200).fadeOut(5000);
displayDataList( "dataList1" , data.msg);
}
else
{
showMsg(data.msg);
}
}
else
{
showMsg(xhr.responseText);
}
//清除檔案選擇框中的已有值
}
};
xhr.open( "POST" ,
"/umbraco/Surface/FileDownLoadSurface/Upload" ,
true );
xhr.setRequestHeader( "X-Requested-With" ,
"XMLHttpRequest" );
var
fd = new
FormData();
fd.append( "file" , files[0]);
xhr.send(fd);
}
var
jqObj = $( "#fileInput1" );
jqObj.val( "" );
var
domObj = jqObj[0];
domObj.outerHTML = domObj.outerHTML;
var
newJqObj = jqObj.clone();
jqObj.before(newJqObj);
jqObj.remove();
$( "#fileInput1" ).unbind().change( function
(e) {
//alert("ab");
uploadfile(e);
});
}
|
1 |
最好在開始上傳後,隱藏或禁用上傳按鈕,以誤點選導致的重發,上傳處理完畢後,重新顯示或啟動上傳按鈕。
|