<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><!– 引用jquery –><script src="//code.jquery.com/jquery-1.11.0.min.js"></script><script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script><!– 引用ajaxfileupload.js –><script src="../js/ajaxfileupload.js"></script><script type="text/javascript">$(function(){//点击打开文件选择器$("#upload").on('click', function() {$('#fileToUpload').click();});//选择文件之后执行上传$('#fileToUpload').on('change', function() {$.ajaxFileUpload({url:'../FileUploadServlet',secureuri:false,fileElementId:'fileToUpload',//file标签的iddataType: 'json',//返回数据的类型data:{name:'logan'},//一同上传的数据success: function (data, status) {//把图片替换var obj = jQuery.parseJSON(data);$("#upload").attr("src", "../image/"+obj.fileName);if(typeof(data.error) != 'undefined') {if(data.error != '') {alert(data.error);} else {alert(data.msg);}}},error: function (data, status, e) {alert(e);}});});});</script></head><body><!– 点击图片，，打开文件选择器，确定，上传。(这是网络上的一个图片) –><img id="upload" alt="" style="width: 200px; height: 200px" src="?fid=2399642819-250528-305026848845811&time=1405674000&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-abo3xnZkLb7yMEPLDWiuaQI8kXM%3D&rt=sh&expires=2h&r=900585425&sharesign=unknown&size=c710_u500&quality=100"><!– 隐藏file标签 –><input id="fileToUpload" style="display: none" type="file" name="upfile"><br/> </body></html>package com.yangshidesign.weixinface.servlet;import java.io.File;import java.io.IOException;import java.util.List;import javax.servlet.ServletContext;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 org.apache.commons.fileupload.FileItem;import org.apache.commons.fileupload.FileUploadException;import org.apache.commons.fileupload.disk.DiskFileItemFactory;import org.apache.commons.fileupload.servlet.ServletFileUpload;import com.alibaba.fastjson.JSONObject;/** * Servlet implementation class FileUploadServlet */@WebServlet("/FileUploadServlet")public class FileUploadServlet extends HttpServlet {private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.getWriter().println("ppppppppppppppppppp");}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//需要返回的fileNameString fileName = null;//参考资料 // Check that we have a file upload requestboolean isMultipart = ServletFileUpload.isMultipartContent(request);// Create a factory for disk-based file itemsDiskFileItemFactory factory = new DiskFileItemFactory();// Configure a repository (to ensure a secure temp location is used)ServletContext servletContext = this.getServletConfig().getServletContext();File repository = (File) servletContext.getAttribute("javax.servlet.context.tempdir");factory.setRepository(repository);// Create a new file upload handlerServletFileUpload upload = new ServletFileUpload(factory);// Parse the requesttry {List<FileItem> items = upload.parseRequest(request);for(FileItem item : items) {//其他参数String type = item.getContentType();if(type == null) {//System.out.println(item.getString(item.getFieldName()));continue;}//文件参数fileName = item.getName();//设置保存文件路径String realPath = request.getServletContext().getRealPath("/image");File dir = new File(realPath);File f = new File(dir, fileName);if(f.exists()) {f.delete();}f.createNewFile();//保存item.write(f);}} catch (FileUploadException e) {e.printStackTrace();} catch (Exception e) {e.printStackTrace();}//返回结果JSONObject obj = new JSONObject();obj.put("fileName", fileName);response.getWriter().print(obj.toJSONString());}}
需要用到的一个js文件：（点击下载）
ajaxfileupload.js
两个jar包：
commons-io-2.4.jar
commons-fileupload-1.3.1.jar
注意：上传成功之后没有执行回调函数。
解决方法：（参考链接：）
何不去远方！昆明呀——赶一个花海;
