file input出於安全角度,是不允許賦值的,即使是置空,雖然通過給outerHtml賦值可以清空,但貌似僅在ie下起使用。
因為缺少置空的方法,用戶異步上傳完畢文件后選擇相同文件時,不會觸發change,因為在這種情況下,我們沒有辦法使value(也就是文件路徑)發生變化。
那難道就無解了么。。當然不是。。
我的解決方法是,每次選完文件,就重建此元素,這樣值自然是空的,因為clone不帶值,這樣就是一個全新的file input,每一次選擇,自然各種正常。以下是關鍵代碼:
<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>
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);
});
}
最好在開始上傳后,隱藏或禁用上傳按鈕,以誤點擊導致的重發,上傳處理完畢后,重新顯示或啟動上傳按鈕。
