一、表单上传文件必须加上enctype="multipart/form-data",(以下是上传文件的表单)
<form action="<%=basePath%>UploadImage" method="post" id="uploadForm" enctype="multipart/form-data">
<input type="hidden" name="picture" value="uploadpic">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="18%" background="<%=basePath%>tab/images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">上传照片</span></div></td>
<td bgcolor="#FFFFFF">
<input type="file" id="pic" name="pic" />
<input type="button" value="上传" οnclick="doUpload();">
</td>
</tr>
</table>
</form>
二、但是使用ajax直接提交表单的数据,在后台会无法获取,因为ajax无法上传文件,经过在网上查阅资料,发现使用ajax提交文件表单必须按照如下代码:(上传按钮单击事件)
<script type="text/javascript">
function doUpload() {
var formData = new FormData($( "#uploadForm" )[0]);
$.ajax({
url: '<%=basePath%>UploadImage' , /*这是处理文件上传的servlet*/
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (returndata) {
document.getElementById("showpic").src="<%=basePath%>UploadImage?picture=showpic";/*这是预览图片用的,自己在文件上传表单外添加*/
},
error: function (returndata) {
alert(returndata);
}
});
}
</script>
三 处理上传图片的servlet
package com.action;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.OutputStream;
import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import javax.servlet.http.Part;
import com.google.gson.Gson;
@WebServlet("/UploadImage")
@MultipartConfig
public class UploadImage extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("---这里是上传图片的servlet----");
String picflag = request.getParameter("picture");
String picPath = null;
if("uploadpic".equals(picflag)){
System.out.println("----上传----");
Part part = request.getPart("pic");//前台的文件标签的name,若ajax直接提交表单,这里无法获取
String file = part.getHeader("Content-Disposition");
//获取文件名
String fileName = file.substring(file.lastIndexOf("=")+2, file.length()-1);
System.out.println(fileName);
//获取项目的部署路劲
String basePath = getServletContext().getRealPath("/");
System.out.println(basePath);
picPath = basePath+fileName;
//上传文件到部署路劲
part.write(basePath+fileName);
//将路径存在session中方便下面显示是用
request.getSession().setAttribute("PIC", picPath);
//以下代码是使用了 AJax异步请求时使用的
Gson gson = new Gson();//创建gson对象
response.setContentType("text/json;charset=utf-8");//设置响应的方式为json
response.getWriter().print(gson.toJson("<font color=red>用户名或密码错误</font>"));
// response.getWriter().write("<script>window.location.href='MyOffice/addPic.jsp';</script>");
}else if("showpic".equals(picflag)){
System.out.println("这里是上传图片里面显示图片的servlet");
//从前台获取图片的路劲(部署项目的根路径)此路劲必须包含到图片,
//如D:\My\SOFTWORE\apache-tomcat-7.0.52\wtpwebapps\imas\111.gif
// String picPath = request.getParameter("picpath");
Object obj = request.getSession().getAttribute("PIC");
String picpath = null;
if(obj != null && obj instanceof String){
picpath = (String) obj;
}
System.out.println(picpath);
//以该路劲创建一个新文件,只需要找到图片的路劲就可以
File file = new File(picpath);
response.setCharacterEncoding("gb2312");
response.setContentType("doc");
response.setHeader("Content-Disposition", "attachment; filename=" + new String(file.getName().getBytes("gb2312"),"iso8859-1"));
System.out.println(new String(file.getName().getBytes("gb2312"),"gb2312"));
OutputStream output = null;
FileInputStream fis = null;
try{
output = response.getOutputStream();
fis = new FileInputStream(file);
byte[] b = new byte[1024];
int i = 0;
while((i = fis.read(b))!=-1){
output.write(b, 0, i);
}
output.write(b, 0, b.length);
output.flush();
response.flushBuffer();
}
catch(Exception e){
System.out.println("Error!");
e.printStackTrace();
}
finally{
if(fis != null){
fis.close();
fis = null;
}if(output != null){
output.close();
output = null;
}
}
}
}
}
四 效果图
上传前