- <%@ page language="java" contentType="text/html; charset=UTF-8"
- pageEncoding="UTF-8"%>
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Insert title here</title>
-
-
- <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>
-
-
- <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标签的id
- dataType: '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="http://d.pcs.baidu.com/thumbnail/e8119cd92364a9b2714ea0a92af15aec?fid=2399642819-250528-305026848845811&time=1405674000&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-abo3xnZkLb7yMEPLDWiuaQI8kXM%3D&rt=sh&expires=2h&r=900585425&sharesign=unknown&size=c710_u500&quality=100">
-
-
- <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;
-
-
-
-
- @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 {
-
- String fileName = null;
-
-
-
- boolean isMultipart = ServletFileUpload.isMultipartContent(request);
-
-
- DiskFileItemFactory factory = new DiskFileItemFactory();
-
-
- ServletContext servletContext = this.getServletConfig().getServletContext();
- File repository = (File) servletContext.getAttribute("javax.servlet.context.tempdir");
- factory.setRepository(repository);
-
-
- ServletFileUpload upload = new ServletFileUpload(factory);
-
-
- try {
- List<FileItem> items = upload.parseRequest(request);
- for(FileItem item : items) {
-
- String type = item.getContentType();
- if(type == null) {
-
- 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
注意:上传成功之后没有执行回调函数。
解决方法:(参考链接:http://www.myexception.cn/ajax/727453.html)
打开ajaxfileupload.js拉到底下找到
- if ( type == "json" ) {
- eval( "data = " + data );
- }
改成:
- if ( type == "json" ) {
- data = data.replace("<pre>","").replace("</pre>","");
-
- }