最近在项目中用到了文件上传功能 ,目前来说主流的上传控件很多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 "上传失败";
}
}