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

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

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

场景是酱紫的:

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

时间: 2024-09-30 06:29:52

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

怎样清空文件上传控件里的选定文件(路径)

我又来扯鸡毛蒜皮了. 有名言曰人生短得不够扯鸡毛蒜皮,但我的工作就是由无数的鸡毛蒜皮组成,如之奈何? 今天的鸡毛和蒜皮是:怎样清空文件上传控件里的选定文件(路径)? 场景是酱紫的: 有一个上传控件和一个button.当中上传控件隐藏.点击button,触发上传控件点击事件,于是弹出文件选择对话框:选好文件后.于是触发了上传控件的onchange事件.在这个事件里.将文件上传. 有点装逼,就是隐藏了上传控件. 这可能是出于界面简约的考虑.问题是.同一个文件不能连续上传2次.由于路径不变,没有触发o

jquery文件上传控件 Uploadify

(转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个版本,一个用flash,一个是html5.html5的需要付费~所以这里只说flash版本的用法. 官网:http://www.uploadify.com/ 控件截图

.Net 使用文件上传控件FileUpload上传图片

例1: 来源:http://long546324.iteye.com/blog/349946 Default.aspx文档: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

jquery文件上传控件 Uploadify(转)

原文:http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个版本,一个用flash,一个是html5.html5的需要付费~所以这里只说flash版本的用法. 官网:http://www.uploadify.com/ 控件截图:

***文件上传控件bootstrap-fileinput的使用和参数配置说明

特别注意:    引入所需文件后页面刷新查看样式奇怪,浏览器提示错误等,可能是因为js.css文件的引用顺序问题,zh.js需要在fileinput.js后面引入.bootstrap最好在fileinput前引入. 比如: <!-- 集成上传插件bootstrap-fileinput 注意BS和JQ的js文件需要放在前面 --><link type="text/css" rel="stylesheet" href="<?php ec

在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件

在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件 引言 这两天沉迷了Google SketchUp,刚刚玩够,一时兴起,研究了一下WebBrowser. 我在<WebBrowser控件使用技巧分享>一文中曾谈到过"我现在可以通过WebBrowser实现对各种Html元素的操控,唯独无法控制Html的上传控件",出于安全原因,IE没有对上传控件提供操控支持,这使得我们没法像控制其他控件一样用简单的代码进行赋值. 比较实际的解决方案就是模拟操作了,下面我就将演示

ASP.NET使用文件上传控件上传图片

ASPX代码 <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

改变FileUpload文件上传控件的显示方式,确认后上传

一.Aspx页面: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FileUploadDemo.aspx.cs" Inherits="WebApplication1.FileUploadDemo" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu

文件上传控件值发生变化后自动提交表单

当文件上传控件发生变化后自动提交表单,首先在页面加载完成后注册change事件,然后检测到值得变化后提交上传代码,代码备忘. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> window.