天天看點

如何清空檔案上傳控件裡的標明檔案(路徑)

我又來扯雞毛蒜皮了。有名言曰人生短得不夠扯雞毛蒜皮,但我的工作就是由無數的雞毛蒜皮組成,如之奈何?

今天的雞毛和蒜皮是:如何清空檔案上傳控件裡的標明檔案(路徑)?

場景是醬紫的:

有一個上傳控件和一個按鈕,其中上傳控件隐藏。點選按鈕,觸發上傳控件點選事件,于是彈出檔案選擇對話框;選好檔案後,于是觸發了上傳控件的onchange事件。在這個事件裡,将檔案上傳。

有點裝逼,就是隐藏了上傳控件。這可能是出于界面簡約的考慮。問題是,同一個檔案不能連續上傳2次,因為路徑不變,沒有觸發onchange事件。有時會帶來不大好的體驗。假如客戶一個檔案上傳失敗,他再試一次,那麼第二次将毫無反應。

改良的思路是在onchange事件裡,上傳之後,将上傳控件的標明内容清空;而每次上傳之前,先判斷是否已標明檔案,避免清空之後再次觸發onchange帶來的尴尬。

代碼如下:

function importData()
            //判斷上傳控件的標明是否為空,空則傳回
            if (document.getElementById("fileImportData").files.length == 0) return;

            function clearFileInput()
                var file = $("#fileImportData");
                file.after(file.clone().val(""));
                file.remove();
            }

            $("#formImport").ajaxSubmit({
                url: "上傳檔案的action",
                type: 'post',
                data: {},
                success: function (data)//上傳成功
                    clearFileInput();//清空
                    。。。
                },
                error: function (e)      

繼續閱讀