<%@ 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> <!-- 引用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<p style="color:transparent">来源gao!%daima.com搞$代*!码网</p>标签的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"> <!-- 隐藏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 { //需要返回的fileName String fileName = null; //参考资料 http://commons.apache.org/proper/commons-fileupload/using.html // Check that we have a file upload request boolean isMultipart = ServletFileUpload.isMultipartContent(request); // Create a factory for disk-based file items DiskFileItemFactory 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 handler ServletFileUpload upload = new ServletFileUpload(factory); // Parse the request try { 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
注意：上传成功之后没有执行回调函数。
打开ajaxfileupload.js拉到底下找到
if ( type == "json" ) { eval( "data = " + data ); }
改成：
if ( type == "json" ) { data = data.replace("<pre>","").replace("</pre>",""); //data = eval("("+data.replace("<pre>","").replace("</pre>","")+")"); }
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：ajaxFileUpload 异步上传文件简单使用
转载请注明原文链接：ajaxFileUpload 异步上传文件简单使用
