JQuery 实现文件上传

简述：

实现前端使用jquery上传文件

后台用servlet处理文件上传以及保存

知识点：

1. 用到ajaxfileupload.js库

2. 后台servlet文件保存

其中ajaxfileupload的库下载地址：

http://www.phpletter.com/download_project_version.php?version_id=34

Maven中需要添加两个java的库，用来上传以及在服务器保存文件

		
			commons-fileupload
			commons-fileupload
			1.2.2
		
		
			org.apache.commons
			commons-io
			1.3.2
		

项目结构（主要是js）

testUpload.html

	






	
	

		

			

				

					
JQuery Ajax File Upload
				
			
			

				

					

				
			
			

				

					
Upload
				
			
		
		

	

后台实现：

参考：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若为ＪＳＯＮ数据时会出现问题，所以需要转为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();
			}
		}
	}