一.上传
1.添加jar包
commons-fileupload-1.2.2.jar
commons-io-2.0.1.jar
2.配置环境
<bean id="multipartResolver" class="org.springframework.web.multipart. commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="10485760"/>
<property name="maxInMemorySize" value="4096"/>
</bean>
3.上传表单
<form method="post" enctype="multipart/form-data" action="addTea">
<table>
<tr><td>照片</td><td><input type="file" name="pic" /></td></tr>
<tr><td colspan="2"><input type="submit" value="go" /></td></tr>
</table>
</form>
4.上传文件控制器
@RequestMapping("teacherAdd")
public String fun2(HttpServletRequest request ,@RequestParam("upphoto") CommonsMultipartFile upphoto) throws Exception{
String path=request.getServletContext().getRealPath("upimg");
InputStream ins = upphoto.getInputStream();
FileOutputStream fout=new FileOutputStream(path+"/show.jpg");
byte[]buff=new byte[100];
while(ins.read(buff)>0){
fout.write(buff);
}
fout.close();
return "ok";
}
或者:上传文件直接传入目标位置
@RequestMapping("teacherAdd")
public String fun2(HttpServletRequest request ,@RequestParam("upphoto") CommonsMultipartFile upphoto) throws Exception{
String filename=request.getServletContext().getRealPath("upfiles")+"/show.jpg";
img.transferTo(new File(filename));
return "ok";
}
二. 下载(通过控制器来控制下载)
1.实现:
@RequestMapping("download")
public void fun3(HttpServletResponse response,
HttpServletRequest request,
String filename) throws Exception{
response.setContentType("application/octet-stream");
ServletOutputStream out = response.getOutputStream();
//没有header,默认控制器名称为文件名
response.setHeader("Content-disposition",
"attachment;filename="+filename);
String path=request.getServletContext().getRealPath("upfiles");
File downfile=new File(path+"/"+filename);
out.write(FileUtils.readFileToByteArray(downfile));
out.flush();
}
2.显示:
@RequestMapping("showImg")
public void fun4(HttpServletResponse response,
HttpServletRequest request,
String filename) throws Exception{
response.setContentType("image/jpeg");
ServletOutputStream out = response.getOutputStream();
String path=request.getServletContext().getRealPath("upfiles");
File downfile=new File(path+"/"+filename);
out.write(FileUtils.readFileToByteArray(downfile));
out.flush();
}
三. 异步上传
1.Ajax上传
提交事件javascript:使用jQuery的ajax方法
function upload(){
var formData=new FormData();
formData.append("upfile",$("#file1")[0].files[0]);
$.ajax({
url:"uptest1.do",
type:"POST",
data:formData,
contentType:false,
processData:false,
success:function(data){
alert(data);
},
});
}
2.jQuery.form
使用Ajax直接提交一方面参数复杂,另一方面无法适应众多表单域提交。为此人们将表单异步提交封装在一个插件中jQuery.form.js。
主要API方法:
1>选择器.ajaxForm(options):给选中表单增加所有需要的事件监听器,为ajax提交表单做准备。ajaxForm并不能提交表单。options为表单参数;
2>选择器.ajaxSubmit(success):异步提交选中表单(可以是上传表单);success为提交成功的回调函数;
3>选择器.resetForm():表单回复初始状态;
<form method="post" enctype="multipart/form-data" action="uptest1.do" id="upform">
<table>
<tr><td>学号</td><td><input type="text" name="stuId" /></td></tr>
<tr><td>姓名</td><td><input type="text" name="stuName"/></td></tr>
<tr><td>生日</td><td><input type="text" name="birthday" /></td></tr>
<tr><td>照片</td><td><input type="file" name="upfile" /></td></tr>
<tr><td colspan="2"><input type="button" value="go" οnclick="upload();" /></td></tr>
</table>
</form>
javascript
$(function(){
$("#upform").ajaxForm({});
});
function upload(){
$("#upform").ajaxSubmit(function(data){
alert(data);
});
return false;
}