标签：
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
