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

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	最好在开始上传后，隐藏或禁用上传按钮，以误点击导致的重发，上传处理完毕后，重新显示或启动上传按钮。