모방 iframe 효과를 사용한 Aajx 파일 업로드 예

얼마 전 ajax 업로드 파일을 해결하는데 많은 시간을 보냈습니다. $.post를 이용하여 직접 텍스트 정보를 업로드하는데는 전혀 문제가 없습니다. 하지만 $.post에 이미지를 직접 업로드하는 것은 불가능합니다.

나중에 인터넷에서 기성 Ajax 업로드 파일 캡슐화 방법과 플래시를 사용하는 일부 솔루션을 포함한 몇 가지 솔루션을 보았습니다. 플래시는 확실히 좋은 방법이지만 플래시를 다들 아시는 것도 아니고, 다운받은 기성 방법을 수정하기도 쉽지 않고, 파일의 용량도 상대적으로 큽니다. 결국 이를 달성하기 위해 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에는 콘텐츠가 없고 표시되지 않으므로 새로 고쳐도 전체 페이지에 전혀 영향을 미치지 않습니다.