如何讓file input能夠實現置空和【異步】上傳后相同文件的再次選擇觸發change


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);
            });
        }
最好在開始上傳后,隱藏或禁用上傳按鈕,以誤點擊導致的重發,上傳處理完畢后,重新顯示或啟動上傳按鈕。

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM