ajax 提交所有表单内容及上传图片（文件），以及单独上传某个图片（文件）
我以演示上传图片为例子：
java代码如下（前端童鞋可以直接跳过看下面的html及js）：
package com.vatuu.web.action; import java.io.File; import java.io.IOException; import java.io.PrintWriter; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONObject; import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; /** * Servlet implementation class NewsUploadImage * 上传新闻配图 */ @WebServlet("/NewsUploadImage") public class NewsUploadImage extends HttpServlet { private static final long serialVersionUID = 1L; //上传配置 private static final int MEMORY_THRESHOLD = 1024 * 1024 ; // 1MB private static final int MAX_FILE_SIZE = 1024* 200 ; // 200k private static final int MAX_REQUEST_SIZE = 1024 * 1024 ; // 1MB /** * @see HttpServlet#HttpServlet() */ public NewsUploadImage() { super(); // TODO Auto-generated constructor stub } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doPost(request, response); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub // 检测是否为多媒体上传 if (!ServletFileUpload.isMultipartContent(request)) { // 如果不是则停止 PrintWriter writer = response.getWriter(); writer.println("Error: 表单必须包含 enctype=multipart/form-data"); writer.flush(); return; } // 配置上传参数 DiskFileItemFactory factory = new DiskFileItemFactory(); // 设置内存临界值 - 超过后将产生临时文件并存储于临时目录中 factory.setSizeThreshold(MEMORY_THRESHOLD); // 设置临时存储目录 factory.setRepository(new File(System.getProperty("java.io.tmpdir"))); ServletFileUpload upload = new ServletFileUpload(factory); // 设置最大文件上传值 upload.setFileSizeMax(MAX_FILE_SIZE); // 设置最大请求值 (包含文件和表单数据) upload.setSizeMax(MAX_REQUEST_SIZE); // 中文处理 upload.setHeaderEncoding("UTF-8"); // 这个路径相对当前应用的目录 String uploadPath = request.getServletContext().getRealPath("/download/news/images"); // 如果目录不存在则创建 File uploadDir = new File(uploadPath); if (!uploadDir.exists()) { uploadDir.mkdir(); } PrintWriter pw = response.getWriter(); JSONObject jsonObject = new JSONObject(); try { // 解析请求的内容提取文件数据 @SuppressWarnings("unchecked") List<FileItem> formItems = upload.parseRequest(request); if (formItems != null && formItems.size() > 0) { // 迭代表单数据 for (FileItem item : formItems) { // 处理不在表单中的字段 if (!item.isFormField()) { String fileName = new File(item.getName()).getName(); //获取文件后缀名 String prefix=fileName.substring(fileName.lastIndexOf(".")+1); //判断文件类型 if(prefix.equals("jpg") || prefix.equals("gif") || prefix.equals("png") || prefix.equals("jpeg")){ //以时间戳+pt两字命名文件 long currentTime=System.currentTimeMillis(); String filePath = uploadPath + currentTime+"pt."+prefix; File storeFile = new File(filePath); // 在控制台输出文件的上传路径 // 保存文件到硬盘 item.write(storeFile); request.setAttribute("message", "文件上传成功!"); jsonObject.put("fileName", currentTime+"pt."+prefix); jsonObject.put("url", filePath); System.out.println("配图上传成功：" + filePath); }else{ request.setAttribute("message", "不支持该文件类型!"); jsonObject.put("url", ""); System.out.println("配图上传失败,不支持该文件类型!"); } } } } } catch (Exception ex) { request.setAttribute("message", "错误信息: " + ex.getMessage()); jsonObject.put("url", ""); } pw.print(jsonObject.toString()); pw.flush(); pw.close(); } }
一次提交所有表单的HTML如下,表单必须添加enctype属性，才能提交文件：
<form action="${basePath}vatuu/NewsAction?setAction=Add" method="post" name="newsForm" id="newsForm" enctype="multipart/form-data"> <table class="table_border table-form table-td-left table-th-normal"> <tr> <th style="min-width: 150px; width: 20%">新闻标题</th> <td><input type="text" id="newsTitle" name="newsTitle" class="input" style="width:40%"></td> </tr> <tr id="newsContent1"> <th style="width: 20%">新闻内容</th> <td style="width: 80%;" id="newsContent" name="newsContent"><script id="container" name="newsContent" type="text/plain" style="height: 700px; width: 99%;"></script></td> </tr> <tr id="newsUrl1" style="display: none"> <th>链接地址</th> <td><input type="text" style="width: 40%;" id="newsUrl" name="newsUrl" value="http://" class="input" /></td> </tr> <tr> <th style="width: 20%">新闻配图</th> <td> <input type="hidden" id="newsImgUrl" name="newsImgUrl" value=""> <input type="file" class="input" name="newsImage" id="newsImage"/> <a href="javascript:uploadNewsImg()" class="btn btn-blue" >上传配图</a> <img id="showUploadImg" width="80" height="50" style="display: none;" /> <span class="c-red" id="message" name="message"></span> <span>提示：文件大小不超过200k，建议图片宽高为245px*160px</span> </td> </tr> <tr> <td colspan="2" style="text-align: center;"> <input type="submit" class="btn btn-blue" value="发布新闻 "/> <input type="reset" class="btn btn-red" value="取消发布" > </td> </tr> </table> </form>
这里的提交可以直接summit 提交整个表单。
但是也有的时候需要单独上传图片或文件，回显是否上传成功，这里就需要用ajax进行处理。
首先引入jquery。
html跟上个差不多，唯一不同的是，不能给form 添加enctype=“multipart/form-data”属性，因为这里单独上传的时候没问题，但是提交整个表单的时候，若加上这个属性，
则整体提交表单的时候又会上传之前的文件，会出错，因此此处去掉enctype属性。
html如下：
<form action="${basePath}vatuu/NewsAction?setAction=Add" method="post" name="newsForm" id="newsForm" > <table class="table_border table-form table-td-left table-th-normal"> <tr> <th style="min-width: 150px; width: 20%">新闻标题</th> <td><input type="text" id="newsTitle" name="newsTitle" class="input" style="width:40%"></td> </tr> <tr id="newsContent1"> <th style="width: 20%">新闻内容</th> <td style="width: 80%;" id="newsContent" name="newsContent"><script id="container" name="newsContent" type="text/plain" style="height: 700px; width: 99%;"></script></td> </tr> <tr id="newsUrl1" style="display: none"> <th>链接地址</th> <td><input type="text" style="width: 40%;" id="newsUrl" name="newsUrl" value="http://" class="input" /></td> </tr> <tr> <th style="width: 20%">新闻配图</th> <td> <input type="hidden" id="newsImgUrl" name="newsImgUrl" value=""> <input type="file" class="input" name="newsImage" id="newsImage"/> <a href="javascript:uploadNewsImg()" class="btn btn-blue" >上传配图</a> <img id="showUploadImg" width="80" height="50" style="display: none;" /> <span class="c-red" id="message" name="message"></span> <span>提示：文件大小不超过200k，建议图片宽高为245px*160px</span> </td> </tr> <tr> <td colspan="2" style="text-align: center;"> <input type="submit" class="btn btn-blue" value="发布新闻 "/> <input type="reset" class="btn btn-red" value="取消发布" > </td> </tr> </table> </form>
对应的ajax异步请求如下，需要使用jquery中的FormData提交文件（好像jquery必须高于1.2版本）。newsImage则是input type=“file”的id，此处我是上传的图片
//上传新闻配图
function uploadNewsImg(){
var formData = new FormData($( "#newsForm" )[0]);
formData.append("file",$("#newsImage")[0]);
formData.append("name",name);
$.ajax({
url:"../vatuu/NewsUploadImage",
type:"POST",
dataType:"json",
data:formData,
contentType: false,
processData: false,
success:function(data) {
if(data.url !="" && data.url != null){
$("#newsImgUrl").val(data.url);
var url = data.url;
//将上传的文件回显
$("#showUploadImg").css("display","block");
$("#showUploadImg").attr("src","../download/news/images/"+data.fileName);
$("#message").text("上传成功!");
}else{
$("#message").text("上传失败!请仔细检查您的图片类型和大小");
}
}
});
}
将返回的url 设置给之前隐藏的img标签，并把img 标签display: block ,这样就能判断图片是否成功了，最后再sumbit 整个表单就行了，
就可以返回的图片的url 提交给后台了。
版权声明：本文为zzd0916原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。