利用iframe 异步文件上传

最近在项目中用到了文件上传功能 ，目前来说主流的上传控件很多uploadify webUploader等

我们在正常做文件上传功能时，由于ajax不支持设置enctype ajax传递的类型为text（String或者JSON） 所以我们只能通过插件flash 或者 iframe

进行类似功能实现，我在最近的项目中使用了iframe来实现该功能，话不多说上货：

jsp 部分：

<form id="formImg" action="/business/Information/upload" enctype="multipart/form-data" method="post" target="hidden_frame">
<span>选择要上传的封面:</span>
<input id="attachmentsId"  type="file"  name='file' width="90%"  />
<input  type="button" value="上传" name="import" style="width:80px;height:20px" οnclick="uploadImg()">
<img id="pic" style='width:100px; height=100px' src='' />
</form>
</div>
<iframe style="display:none" name='hidden_frame' id="hidden_frame" οnlοad="callback()"></iframe> 

1.建立一个iframe 然后可以通过设置irame的宽高把这个iframe 隐藏掉

2.把form的target属性设置为iframe id 即将form表单提交到这个iframe里 

3.编写js方法

   js：

function uploadImg()  
{  
    var names=$("#attachmentsId").val().split(".");  
    if(names[1]!="gif"&&names[1]!="GIF"&&names[1]!="jpg"&&names[1]!="JPG"&&names[1]!="png"&&names[1]!="PNG")  
    {  
    alert("图片必须为gif,jpg,png格式");  
        return;  
    }  
    $("#formImg").submit();  
}  
  
function callback()  
{  
 var body = $(window.frames['hidden_frame'].document.body);
 var info = body.context.textContent;
 if(info==""){
 return;
 }else{
 var msg = info.split(";")[0];
 if(msg=="上传成功"){
 $("#pic").attr("src",info.split(";")[1]);
 $("#infromationPicId").val(info.split(";")[1]);
 }
 alert(msg);   
 } 
}

最后后台controller方法 （项目使用的springmvc 其他框架自行改写）

@RequestMapping(value="/upload",method=RequestMethod.POST,produces="application/json;charset=UTF-8")
public String upload(MultipartFile file,HttpServletRequest request,HttpServletResponse response){
try {
//System.out.println(uploadPath);
String filename = file.getOriginalFilename();
   long _lTime = System.nanoTime();
   String _ext = filename.substring(filename.lastIndexOf("."));
   filename = _lTime + _ext;    
FileUtils.writeByteArrayToFile(new File(uploadPath,filename), file.getBytes());
request.getSession().setAttribute("pic", "/toucuzhongxin.ccpit.org.upload"+"/"+filename);
return "上传成功;/toucuzhongxin.ccpit.org.upload"+"/"+filename;
} catch (IOException e) {
e.printStackTrace();
return "上传失败";
}
}