Ajax提交表单,带文件上传

文件上传时,使用Ajax提交表单会很方便

public void addGame(HttpServletRequest request, HttpServletResponse response) throws Exception{
		/*
		 * 建立文件工厂(已经确定当前请求时文件上传,否则还需要先判断)
			if(ServletFileUpload.isMultipartContent(request))判断语句,
			如果为false,说明表单只包含文本;反之,表单是多媒体上传
		 */
		DiskFileItemFactory factory = new DiskFileItemFactory();
		//获取当先项目的绝对路径
		String realPath = getServletContext().getRealPath("/");
		//获取文件上传时产生的临时文件目录tmp路径
		String tmp = realPath + "upload\\tmp";
		//创建文件临时存储目录
		factory.setRepository(new File(tmp));
		//获取servlet文件上传对象
		ServletFileUpload upload = new ServletFileUpload(factory);
		//使用文件上传对象获取流及表单字段
		List<FileItem> items = upload.parseRequest(request);
		GameInfo gameInfo = new GameInfo();
		
		String pictures = "";//初始化游戏详情图片上传路径
		//遍历集合对象,将表单数据与上传文件分开处理
		for(FileItem item : items) {
			String fieldName = item.getFieldName();
			String fieldValue = item.getString();
			//对象是表单数据
			if(item.isFormField()) {
				if("gname".equals(fieldName)) {					
						//表单字段有汉字的需要进行处理防止乱码
						gameInfo.setGname(new String(fieldValue.getBytes("iso-8859-1"),"gbk"));					
				}
				if("gtitle".equals(fieldName)) {											
						gameInfo.setGtitle(new String(fieldValue.getBytes("iso-8859-1"),"gbk"));					
				}
				if("size".equals(fieldName)) {
					//判断值不为null且不为空字符串
					if(StringUtils.isNotEmpty(fieldValue)) {						
						gameInfo.setSize(Double.parseDouble(fieldValue));
					}
				}
				if("status".equals(fieldName)) {					
						gameInfo.setStatus(new String(fieldValue.getBytes("iso-8859-1"),"gbk"));					
				}
				if("gameType".equals(fieldName)) {					
						gameInfo.setGameType(new String(fieldValue.getBytes("iso-8859-1"),"gbk"));					
				}
				if("platform".equals(fieldName)) {					
						gameInfo.setPlatform(new String(fieldValue.getBytes("iso-8859-1"),"gbk"));					
				}
				if("recommendType".equals(fieldName)) {					
						gameInfo.setRecommendType(new String(fieldValue.getBytes("iso-8859-1"),"gbk"));					
				}
				if("ios_link".equals(fieldName)) {					
						gameInfo.setIos_link(new String(fieldValue.getBytes("iso-8859-1"),"gbk"));					
				}
				if("android_link".equals(fieldName)) {					
						gameInfo.setAndroid_link(new String(fieldValue.getBytes("iso-8859-1"),"gbk"));					
				}
				if("description".equals(fieldName)) {					
					gameInfo.setDescription(new String(fieldValue.getBytes("iso-8859-1"),"gbk"));				
				}
			} else {//保存上传文件				
				
				//为了防止文件重名,加入随机数和毫秒数
				String random = RandomStringUtils.random(6, true, false);
				//已.作为分隔符将文件名分割,取后缀
				String[] split = item.getName().split("\\.");
				//获取文件名
				String fileName = random + "_" + System.currentTimeMillis() + "_." + split[split.length - 1];
				//不是项目中的upload文件夹,是tomcat目录下的upload,文件放在其中
				String filePath = realPath + "/upload/" + fileName;//文件在数据库的存放目录,带盘符
				File file = new File(filePath);
				item.write(file);
					
				String path = request.getContextPath();
				String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
				if("gicon".equals(item.getFieldName())) {
					//访问图片的网络地址
					String gicon = basePath + "upload/" + fileName;
					gameInfo.setGicon(gicon);	
				}
				if("pictures".equals(item.getFieldName())) {//游戏详情图片,需要将图片路径拼接到一起
					pictures = pictures + basePath + "upload/" + fileName + "_;";//拼接图片网络路径
					
				}
				}
								
			}
			//设置所有图片路径
			gameInfo.setPictures(pictures);
			gsd.addGame(gameInfo);
			//使用模态框时保证页面不跳转
			//request.getRequestDispatcher("/").forward(request, response);
		}

上面是后台的Java代码,只是最基本的,没有进行文件校验,也没有设置文件上传大小,最大请求值等参数

//formData提交表单数据
	function add() {	
		//在构造FormData对象的时候，把表单的对象，作为一个参数放进去,form就拥有表单的所有数据
		var form = new FormData(document.getElementById("add"));
		$.ajax({
			type:"post",
			url:"servlet/GameInfoServlet?option=add",
			data:form,
			//告诉jQuery不要去处理发送的数据
			processData:false,
			//告诉jQuery不要去设置Content-Type请求头,因为表单已经设置了multipart/form-data
			contentType:false,
			success:function(data) {
				$("#editModal").modal("hide");
				manage();
			}
		
		});
	}

构造FormData对象的时候,用jQuery选择器会报错,意思似乎是该对象没有继承哪个接口还是怎么的,只能js的选择器,在这花了刚好长时间.

还有就是两个参数:

processData:false,contentType:false,至于为什么要这样设置,自己也是在网上查了以后才知道