JQuery 实现文件上传

最新推荐文章于 2023-01-03 20:39:48 发布

anialy

最新推荐文章于 2023-01-03 20:39:48 发布

阅读量5.6w

点赞数 2

分类专栏： Java Web JQuery

Java Web 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

JQuery

16 篇文章 0 订阅

订阅专栏

简述：

实现前端使用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"
							οnclick="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，则如下示例

/**
 * 上传图片
 */
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();
			}
		}
	}

anialy

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
6
评论
JQuery 实现文件上传

简述：实现前端使用jquery上传文件后台用servlet处理文件上传以及保存知识点：1. 用到ajaxfileupload.js库2. 后台servlet文件保存其中ajaxfileupload的库下载地址：http://www.phpletter.com/download_project_version.php?version_id=34
复制链接

扫一扫