jquery ajax 无刷新上传文件到servlet

删除文件的表单要加入如下enctype属性：

<form id="upload" enctype="multipart/form-data"><!--//由于使用ajax上传，不用加action和method属性-->

要实现无刷新上传文件首先要阻止submit按钮提交表单，在submit按钮添加onclick属性：

<button type="submit"  οnclick="return false">登录</button><!-- 用input也可以 -->

这样写这个提交按钮就失效了。

接着需要在按下提交按钮时执行ajax操作，将标签改为：

<button  type="submit"  οnclick="return upload()">登录</button><!-- 用input也可以 -->

js函数如下：

	function upload()
	{
		//提交前先对文件进行检查，<input id="file" type="file">
		var file = $("#file")[0].files;//获取上传控件中的文件列表
		if(file.length == 0){//没有指定文件
			alert("请选择文件");
		}
		else if(file.length>1){//文件多于一个，这个根据具体需求，我这里限定只能传一个
			alert("只能上传一个文件");
		}
		else{
			file = file[0];//确定只有一个文件了，取得这个文件对象
			if(file.type! = "image/png"&&file.type!="image/jpeg"&&file.type!="image/gif"){//检查文件格式，根据具体需求
				alert("文件格式错误");
			}
			else if(file.size>1024*500){//检查文件大小，这里限定了文件大小不超过500KB
				alert('文件太大');
			}
			else{
				var formData=new FormData($('#upload')[0]);//取得表单的所有数据
				document.body.append($("<div id='shadow' style='width:100%;height:100%;"+
				"position:fixed;top:0px;left:0px;background-color:rgba(100,100,100,0.3);"+
				"z-index:"+Number.MAX_SAFE_INTEGER+"'></div>")[0]);
				//执行ajax之前在当前页面加入一个遮罩层，表示正在上传
				$.ajax({
					url:"../Upload",
					method:"post",
					timeout:5000,
					data:formData,
					processData:false,
					contentType:false,//这两行是上传文件时才需要加的
					success:function(data){
						if(data=="ok"){
							//上传成功
						}
						else{
							alert(data);//打印服务器返回的错误信息
						}
					},
					error:function(data){
						alert("上传失败");
					},
					complete:function(){
						$("#shadow").remove();//结束时移除遮罩层
					}
				});
			}
		}
		return false;//还记得它的作用吗?阻止submit按钮提交表单
	};

servlet代码：

servlet需要添加一个注解@MultipartConfig,也可以用web.xml配置，这里不做介绍

@WebServlet("/Upload")
@MultipartConfig
public class UploadServlet extends HttpServlet {
	................
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		final Part filePart = request.getPart("file");
		if (filePart == null) {
			response.getWriter().print("未指定文件");
			return;
		}
		
		if (filePart.getSize() > 1024 * 500) {
			response.getWriter().print("文件太大");
			return;
		}
		String filename = filePart.getSubmittedFileName();//获取上传文件名
		String realPath = this.getServletContext().getRealPath("/upload");
		//获取web目录的真实物理路径，文件将保存在upload文件夹下
		File dir=new File(realPath);
		if(!dir.exist()){
			dir.mkdir();//如果目录不存在，则创建
		}

		filePart.write(realPath + "/" + filename);//将文件写入磁盘
			
		response.getWriter().print("ok");
	}
	.................
}