如何让file input能够实现置空和【异步】上传后相同文件的再次选择触发change

file input出于安全角度,是不允许赋值的,即使是置空,虽然通过给innerHtml赋值可以清空,但貌似仅在ie下起使用。

因为缺少置空的方法,用户异步上传完毕文件后选择相同文件时,不会触发change,因为在这种情况下,我们没有办法使value(也就是文件路径)发生变化。

那难道就无解了么。。当然不是。。

我的解决方法是,每次选完文件,就重建此元素,这样值自然是空的,因为clone不带值,这样就是一个全新的file input,每一次选择,自然各种正常。以下是关键代码:

                <label id="realBtn" class="btn btn-info">
                    <input type="file" id="fileInput1" name="file" class="mFileInput" style="left:-9999px;position:absolute;">
                    <span>导入EXCEL数据</span>
                </label>
function uploadfile(eventP) {
            var files = eventP.target.files;
            if (files.length == 0) {
                showMsg("请选择文件");
                return;
            }
            $(".loadingTxt1").hide().html("正在上传并生成预览 ...").fadeIn(200);
            var xhr = false;
            try {
                xhr = new XMLHttpRequest();//尝试创建 XMLHttpRequest 对象,除 IE 外的浏览器都支持这个方法。
            } catch (e) {
                xhr = ActiveXobject("Msxml12.XMLHTTP");//使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)。
            }
            if (xhr.upload) {
                // 文件上传成功或是失败
                xhr.onreadystatechange = function (e) {
                    if (xhr.readyState == 4) {

                        if (xhr.status == 200) {
                            var data = JsonTool.parse(xhr.responseText)
                            if (data.result == "Success") {
                                $(".loadingTxt1").hide().html("本次上传数据 " + data.msg.length + " 条。").fadeIn(200).fadeOut(5000);
                                displayDataList("dataList1", data.msg);
                            }
                            else {
                                showMsg(data.msg);
                            }
                        } else {
                            showMsg(xhr.responseText);
                        }
                        //清除文件选择框中的已有值
                    }
                };
                xhr.open("POST", "/umbraco/Surface/FileDownLoadSurface/Upload", true);
                xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

                var fd = new FormData();
                fd.append("file", files[0]);
                xhr.send(fd);
            }
            var jqObj = $("#fileInput1");
            jqObj.val("");
            var domObj = jqObj[0];
            domObj.outerHTML = domObj.outerHTML;
            var newJqObj = jqObj.clone();
            jqObj.before(newJqObj);
            jqObj.remove();
            $("#fileInput1").unbind().change(function (e) {
                //alert("ab");
                uploadfile(e);
            });
        }
最好在开始上传后,隐藏或禁用上传按钮,以误点击导致的重发,上传处理完毕后,重新显示或启动上传按钮。

  

时间: 2024-07-31 14:22:07

如何让file input能够实现置空和【异步】上传后相同文件的再次选择触发change的相关文章

input(file)异步上传文件

页面 <input id="file" name="file" type="file"><button id="btn" type="button">上传</button> //异步上传文件var $file = $('#file');$('#btn').click(function() { var data = new FormData(); data.append('

使用html中的&lt;input&gt;标签上传多个文件(转)

如何使用html上传多个文件呢?我搜索中文怎么也找不到合适的,都是用js动态添加input,然后提交,不能满足我想要的——打开选择文件的窗口后可以一次性选择多个文件. 然后我尝试搜索英文"html input file multiple",终于在stackoverflow找到一个文章:http://stackoverflow.com/questions/1175347/how-can-i-select-and-upload-multiple-files-with-html-and-ph

单个input框上传多个文件操作

HTML页面: 1 <div class="form-group thumb"> 2 <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="info">产品图片上传:</label> 3 4 <div class="col-xs-12 col-sm-9" style="width:25%;&

File杂谈——拖拽异步上传实现

在前一篇文章<File杂谈--拖拽上传前传>中我制作了一个静态的拖拽上传界面,拖拽文件到显示区域释放,可以显示拖入文件的基本信息.本文将在此基础上进一步加工,打造一个完整的拖拽上传示例. 示例说明 点击区域选择文件或直接将文件拖入区域,触发文件上传功能,文件将异步发送到服务器.待服务端处理完成后返回基本信息,在页面中显示.由于服务器容量问题,本示例未做文件保存处理,只是简单的将文件基本信息返回,文件上传的后端具体处理逻辑需要自行补充. 新的小伙伴FormData 我们知道,传统的文件上传如果要

input type=&quot;file&quot;文件上传时得到文件的本地路劲

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <title>上传图片预览示例

input 框上传多个文件

在input标签中加入 multiple 属性,可以在一个输入框中选择多个文件进行上传 <input type="file" name="img" multiple="multiple" />当然,这样也是一样的: <input type="file" name="img" multiple /> 2.很多时候上传的时候,我们要限制一下上传文件类型( 在windows中主要是限制后缀

input上传mp3格式文件,预览并且获取时间

<input type="file" id="file" name="file" class="upfile" onchange="fileupload(this)"/> <audio id="audio" controls="" style="display: none;"></audio> //附件展示 $(

动态input file多文件上传到后台没反应的解决方法!!!

其实我也不太清除具体是什么原因,但是后面就可以了!!! 我用的是springMVC 自带的文件上传 1.首先肯定是要有springMVC上传文件的相关配置! 2.前端 这是动态input file上传到后台没反应的写法(页面上写死的上传到后台是可以的) 这段代码是写在table>>下的form表单里的 <input type="button" name="button" value="添加附件" onclick="ad

根目录97 &lt;input file&gt;标签,把图片上传到服务器(跟增删改查一起实现)

1 首先来个简单的html页面: enctype="multipart/form-data" encoding="multipart/form-data" action="../../后台/后台方法.do" //form表单加上这几个属性 action指向后台添加方法 2 3 <input type="button" id="uupdatekeyword2" value="修改"