iframe 効果を模倣した Aajx ファイルのアップロード例

少し前、私は ajax によるファイルのアップロードの問題を解決するのにしばらく苦労しました。 $.postを使ってテキスト情報を直接アップロードしても全く問題ありません。ただし、$.post に画像を直接アップロードすることは現実的ではありません。

その後、インターネット上で既製の Ajax アップロード ファイルのカプセル化方法やフラッシュを使用する方法など、いくつかの解決策を見ました。 Flash は確かに優れたメソッドですが、誰もが Flash を知っているわけではなく、ダウンロードした既製のメソッドを変更するのは簡単ではなく、ファイルは比較的大きいです。結局、それを実現するには iframe をシミュレートする必要がありました。非常にシンプルであることがわかりました。

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>

ここが重要なポイントです。ファイルをアップロードするには、enctype 属性が必須です。target の値は、iframe の名前の値に変更されます。

以下のjsコードを記述します。jQueryを使用するため、使用する際にはjqueryライブラリをロードすることが必須です。

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

IEは仕様を満たしていないブラウザ、特にIE6のため、ここでブラウザのバージョン判定を行います。 IE6 は $("#idName").submit(); を直接サポートしていません。

サーバーは次のとおりです。値を返す必要があり、直接送信は値を返すことはできません

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()弹出一个对话框提示一下，如果是这样那么不调父页方法也行。如果想把这提示的内容丰富一点比如弹出个类似人人网的蓝色的对话框之类的。
   }
}

iframe のシミュレートは実際にはページの部分的な更新ですが、ページ内の iframe にはコンテンツがなく、は表示されないため、更新してもページ全体にはまったく影響しません。