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); }); }
最好在开始上传后,隐藏或禁用上传按钮,以误点击导致的重发,上传处理完毕后,重新显示或启动上传按钮。
如何让file input能够实现置空和【异步】上传后相同文件的再次选择触发change
原文:http://www.cnblogs.com/laozuan/p/4660405.html