天天看点

如何清空文件上传控件里的选定文件(路径)

我又来扯鸡毛蒜皮了。有名言曰人生短得不够扯鸡毛蒜皮,但我的工作就是由无数的鸡毛蒜皮组成,如之奈何?

今天的鸡毛和蒜皮是:如何清空文件上传控件里的选定文件(路径)?

场景是酱紫的:

有一个上传控件和一个按钮,其中上传控件隐藏。点击按钮,触发上传控件点击事件,于是弹出文件选择对话框;选好文件后,于是触发了上传控件的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)      

继续阅读