Beispiel für das Hochladen einer Aajx-Datei mit imitiertem Iframe-Effekt

Ich habe vor einiger Zeit viel Zeit damit verbracht, Ajax-Upload-Dateien zu lösen. Es ist definitiv kein Problem, Textinformationen direkt über $.post hochzuladen. Es ist jedoch nicht möglich, Bilder direkt in $.post hochzuladen.

Später habe ich einige Lösungen im Internet gesehen, darunter vorgefertigte Methoden zur Kapselung hochgeladener Ajax-Dateien und einige, die Flash verwenden. Flash ist in der Tat eine gute Methode, aber nicht jeder kennt Flash, und es ist nicht einfach, die heruntergeladene vorgefertigte Methode zu ändern, und die Datei ist relativ groß. Letztendlich musste ich Iframe simulieren, um dies zu erreichen. Finde es ganz einfach.

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>

Hier ist der entscheidende Punkt. Zum Hochladen von Dateien ist das enctype-Attribut unerlässlich. Der Wert von target wird in den Wert des iframe-Namens geändert.

Schreiben Sie den folgenden js-Code. Ich verwende jQuery, daher ist es wichtig, die jquery-Bibliothek zu laden, wenn ich sie verwende.

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

Hier ist eine Beurteilung der Browserversion, da IE ein Browser ist, der nicht den Spezifikationen entspricht, insbesondere IE6. IE6 unterstützt $("#idName").submit(); nicht direkt.

Die Serverseite ist wie folgt: Sie muss einen Wert zurückgeben. Die direkte Übermittlung kann keinen Wert zurückgeben.

public void Upload()
{
  HttpPostedBase ff=Request.Files["document"];//这里是获取上传的文件流，也可以用索引值来表示如果是多个文件的话
  string fileName=System.DateTime.Now+ff.FileName.ToString();  //这里取出来的文件名是没有后缀的，所以要保存的话还需要取出文件拓展名。这里就不写过细，只是为描述这样一个思路。
  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();这个是JS调用父页的方法。因为现在模拟一个iframe上传文件，这个iframe的作用就是一个中间站的作用。在父页点击上传后通过target会将页面文档流传入iframe中再上传服务端作处理。服务端有响应之后然后再在iframe里面显示出来，而不是直接在父页面显示出结果。这里可能就是一个alert()弹出一个对话框提示一下，如果是这样那么不调父页方法也行。如果想把这提示的内容丰富一点比如弹出个类似人人网的蓝色的对话框之类的。
   }
}