如何清空文件上传控件里的选定文件(路径)
发布日期:2021-06-30 17:24:39 浏览次数:2 分类:技术文章

本文共 1304 字,大约阅读时间需要 4 分钟。

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

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

场景是酱紫的:

有一个上传控件和一个按钮,其中上传控件隐藏。点击按钮,触发上传控件点击事件,于是弹出文件选择对话框;选好文件后,于是触发了上传控件的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来实现,而不是偏应用()。我觉得他有道理。但是,一来我年纪大了,一味搞前端大家都接受不了;二来可能对当架构师帮助不是很大。如今分工越来越精细,所有技术都掌握是不可能的,有些只需了解,会用就行了,要学会放手。

转载地址:https://leftfist.blog.csdn.net/article/details/50332047 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:操作系统学习笔记:保护
下一篇:如何才能成为一名架构师?

发表评论

最新留言

能坚持,总会有不一样的收获!
[***.219.124.196]2024年04月23日 17时09分26秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章