怎样清空文件上传控件里的选定文件（路径）

Posted 2020-09-22 brucemengbm

我又来扯鸡毛蒜皮了。

有名言曰人生短得不够扯鸡毛蒜皮，但我的工作就是由无数的鸡毛蒜皮组成，如之奈何？

今天的鸡毛和蒜皮是：怎样清空文件上传控件里的选定文件（路径）？

场景是酱紫的：
有一个上传控件和一个button。当中上传控件隐藏。点击button，触发上传控件点击事件，于是弹出文件选择对话框；选好文件后。于是触发了上传控件的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) {
                    clearFileInput();
                    alert(e);
                }
            });
        }

这段时间搞了不少前端，认为对前端的认识比曾经有所进步。

前几天看到有个腾讯的员工写了篇文章，说要想真正搞好前端，应该努力去吃透某个JS框架的底层，或者自己用标准的JS来实现，而不是偏应用（http://www.cnblogs.com/vajoy/p/5040365.html）。我认为他有道理。

可是，一来我年纪大了，一味搞前端大家都接受不了；二来可能对当架构师帮助不是非常大。现在分工越来越精细。全部技术都掌握是不可能的。有些仅仅需了解，会用即可了，要学会放手。