Some time ago, I struggled for a while to solve the problem of ajax uploading files. There is definitely no problem in uploading text information directly using $.post. But it is not feasible to upload images directly in $.post.

Later I saw some solutions on the Internet, including ready-made ajax uploaded file encapsulation methods and some using flash. Flash is indeed a good method, but not everyone knows flash, and it is not easy to modify the downloaded ready-made method, and the file is relatively large. In the end, I had to simulate iframe to achieve it. Found it to be quite simple.

html：

<iframe name="ajaxUpload" style="display:none"></iframe>
<form name="from1" id="from1" method="post" action="url" enctype="multipart/form-data"target="ajaxUpload">
 <table>
  <tr>
    <td>附件:</td>
    <td><input type="file" id="document" name="document"/></td>
  </tr>
 </table>
 </form>

Here is the key point. To upload files, the enctype attribute is indispensable. The value of target is changed to the value of iframe's name.

Write the js code below. I use jQuery, so it is essential to load the jquery library when using it.

$(function(){
     if($.browser.msie){
       window.form1.submit();}else{
       $("#form1").submit();}
    });

Here is a browser version judgment, because IE is a browser that does not meet the specifications, especially IE6. IE6 does not directly support $("#idName").submit();.

The server is as follows, it has to return a value, direct submission cannot return a value

public void Upload()
{
  HttpPostedBase ff=Request.Files["document"];//這里是獲取上傳的文件流，也可以用索引值來(lái)表示如果是多個(gè)文件的話(huà)
  string fileName=System.DateTime.Now+ff.FileName.ToString();  //這里取出來(lái)的文件名是沒(méi)有后綴的，所以要保存的話(huà)還需要取出文件拓展名。這里就不寫(xiě)過(guò)細(xì)，只是為描述這樣一個(gè)思路。
  try
  {
    SaveAs(documentPath+fileName+extendtionName);
    Response.Write("<script type=&#39;text/javascript&#39; type=&#39;language&#39;>parent.window.callBackMethod(&#39;上傳成功&#39;);</scrpt>");
  }
  catch
  {
    Response.Write("<script type=&#39;text/javascript&#39; type=&#39;language&#39;>parent.window.callBackMethod(&#39;上傳失敗&#39;);</scrpt>"); //parent.window.methodName();這個(gè)是JS調(diào)用父頁(yè)的方法。因?yàn)楝F(xiàn)在模擬一個(gè)iframe上傳文件，這個(gè)iframe的作用就是一個(gè)中間站的作用。在父頁(yè)點(diǎn)擊上傳后通過(guò)target會(huì)將頁(yè)面文檔流傳入iframe中再上傳服務(wù)端作處理。服務(wù)端有響應(yīng)之后然后再在iframe里面顯示出來(lái)，而不是直接在父頁(yè)面顯示出結(jié)果。這里可能就是一個(gè)alert()彈出一個(gè)對(duì)話(huà)框提示一下，如果是這樣那么不調(diào)父頁(yè)方法也行。如果想把這提示的內(nèi)容豐富一點(diǎn)比如彈出個(gè)類(lèi)似人人網(wǎng)的藍(lán)色的對(duì)話(huà)框之類(lèi)的。
   }
}

Simulating an iframe is actually a partial update of the page, but the iframe in the page has no content and is not displayed, so it Refreshing will not affect the entire page at all.