简述:
实现前端使用jquery上传文件
后台用servlet处理文件上传以及保存
知识点:
1. 用到ajaxfileupload.js库
2. 后台servlet文件保存
其中ajaxfileupload的库下载地址:
http://www.phpletter.com/download_project_version.php?version_id=34
Maven中需要添加两个java的库,用来上传以及在服务器保存文件
<dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.2.2</version> </dependency> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-io</artifactId> <version>1.3.2</version> </dependency>
项目结构(主要是js)
testUpload.html
<!DOCTYPE html> <head> <title>MyWebProject</title> <meta charset="utf-8" /> <link type="text/css" href="./lib/css/jquery-ui-1.8.19.custom.css" rel="stylesheet" /> <link type="text/css" href="./lib/css/ajaxfileupload.css" rel="stylesheet" /> <script type="text/javascript" src="./lib/js/jquery-1.8.3.js"></script> <script type="text/javascript" src="./lib/js/ajaxfileupload.js"></script> <script type="text/javascript"> function ajaxFileUpload() { $.ajaxFileUpload({ url : "./UploadFile", //submit to UploadFileServlet secureuri : false, fileElementId : \'fileToUpload\', dataType : \'text\', //or json xml whatever you like~ success : function(data, status) { $("#result").append(data); }, error : function(data, status, e) { $("#result").append(data); } }); return false; } </script> </head> <body> <!-- upload file --> <form name="form" action="./UploadFile" method="POST" enctype="multipart/form-data"> <table class="tableForm"> <thead> <tr> <th>JQuery Ajax File Upload</th> </tr> </thead> <tbody> <tr> <td><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"></td> </tr> </tbody> <tfoot> <tr> <td><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></td> </tr> </tfoot> </table> <div id="result" style="margin-left:200px"></div> </form> </body> </html>
后台实现:
参考:http://blog.163.com/lin305_gf/blog/static/969524402011718102116625/
UploadFileServlet.java
package mwp.servlet; import java.io.File; import java.io.IOException; import java.util.Iterator; import javax.servlet.ServletException; 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.FileItemFactory; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; import org.slf4j.Logger; import org.slf4j.LoggerFactory; /** * Servlet implementation class UploadFileServlet */ public class UploadFileServlet extends HttpServlet { private static final long serialVersionUID = 1L; private static Logger logger = LoggerFactory.getLogger(UploadFileServlet.class); /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); //判断提交过来的表单是否为文件上传菜单 boolean isMultipart= ServletFileUpload.isMultipartContent(request); if(isMultipart){ //构造一个文件上传处理对象 FileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); Iterator items; try{ //解析表单中提交的所有文件内容 items = upload.parseRequest(request).iterator(); while(items.hasNext()){ FileItem item = (FileItem) items.next(); if(!item.isFormField()){ //取出上传文件的文件名称 String name = item.getName(); //取得上传文件以后的存储路径 String fileName = name.substring(name.lastIndexOf(\'\\\') + 1, name.length()); //上传文件以后的存储路径 String saveDir = this.getServletContext().getRealPath("/upload/"); if (!(new File(saveDir).isDirectory())){ new File(saveDir).mkdir(); } String path= saveDir + File.separatorChar + fileName; //上传文件 File uploaderFile = new File(path); item.write(uploaderFile); } } }catch(Exception e){ e.printStackTrace(); response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR); return; } response.setStatus(HttpServletResponse.SC_OK); response.getWriter().append("Success Upload"); } } }
测试界面:
如若数据交换格式是JSON,则如下示例
JS
/** * 上传图片 */ function uploadUnitImage() { showLoading("正在上传,请等待..."); $.ajaxFileUpload ( { url:\'/my-web/fileUpload?action=uploadImage\',//用于文件上传的服务器端请求地址,目前与优惠券上传图片请求地址一致 secureuri:false,//一般设置为false fileElementId: \'unitImageToUpload\', //文件上传空间的id属性 dataType: \'json\',//返回值类型 一般设置为json success: function (data, status) //服务器成功响应处理函数 { if(typeof(data.error) != \'undefined\') { if(data.error != \'\') { alert(data.error); dismissLoading(); }else { //若上传成功则自定义一些事 // do something } } }, error: function (data, status, e)//服务器响应失败处理函数 { alert(e); dismissLoading(); } } ) }
JAVA
public void uploadImage( HttpServletRequest request,HttpServletResponse response) throws Exception{ logger.debug("上传图片"); //上传图片 String fileUrl=uploadFileAndGetFileUrl(request); String responseText = ""; if(!StringUtils.isEmpty(fileUrl)){ logger.debug("图片下载地址是"+fileUrl); responseText="{error: \'\',url: \'"+fileUrl+"\'}"; }else{ logger.debug("账户创建页面,图片上传失败"); responseText="{error: \'\'}"; } responseOutWithText(response, responseText); }
由于AjaxFileUpload在解析返回的response若为JSON数据时会出现问题,所以需要转为text
/** * 以文本形式下发数据 * @param response * @param responseText */ protected void responseOutWithText(HttpServletResponse response, String responseText) { response.setCharacterEncoding("UTF-8"); response.setContentType("text/html"); PrintWriter out = null; try { out = response.getWriter(); out.println(responseText); out.close(); logger.debug("下发的数据是"); logger.debug(responseText); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } finally { if (out != null) { out.close(); } } }