http://www.cnblogs.com/laozuan/p/4660405.html
file input出于安全角度,是不允许赋值的,即使是置空,虽然通过给outerHtml赋值可以清空,但貌似仅在ie下起使用。
因为缺少置空的方法,用户异步上传完毕文件后选择相同文件时,不会触发change,因为在这种情况下,我们没有办法使value(也就是文件路径)发生变化。
那难道就无解了么。。当然不是。。
我的解决方法是,每次选完文件,就重建此元素,这样值自然是空的,因为clone不带值,这样就是一个全新的file input,每一次选择,自然各种正常。以下是关键代码:
1
2
3
4
|
<
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
>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
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);
});
}
|
1
|
最好在开始上传后,隐藏或禁用上传按钮,以误点击导致的重发,上传处理完毕后,重新显示或启动上传按钮。
|