如何讓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 |
最好在開始上傳後，隱藏或禁用上傳按鈕，以誤點選導致的重發，上傳處理完畢後，重新顯示或啟動上傳按鈕。
|