博客

一.前端代码


1.htlm代码

<form id="viaBox" method="post" enctype="multipart/form-data">
						<input type="hidden" name="code" class="via_idCode" />
						<img class="user_via" src="<%=basePath%>web/img/default.png"  /> 
						<input type="file" accept="image/*"  name="via_photo" class="via_photo" id="via_photo"  onchange="changeVia()" />
</form>

2.js代码

function changeVia(){
	var reads = new FileReader();
	var img = document.querySelector(".via_photo").files[0];
	if(img.size <= 1024*1024*1){
		reads.readAsDataURL(img);
		reads.onload = function(e){
			document.querySelector(".user_via").src=this.result;//将图片url转成base64
		}
		$.ajax({
			type:"post",
			url:url,
			cache:false,//上传数据不需要缓存
			contentType:false,//已经在表单的entype处声明了multipart/form-data
			processData:false,//data值是FormData对象，不需要对数据做处理
			data:new FormData($("#viaBox")[0]),
			success:function(res){
				console.log(res);
			},
			error:function(err){
				console.log(error);
			}
		})
	}else{
		console.log("上传图片不能超出1M");
	}
}

二.后端代码


这里我分别引入了commons-fileupload-1.4.jar和commons-io-2.7.jar

可以去apache官网下载（

http://apache.org/

）

public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
		request.getRequestDispatcher("WEB-INF/test01.jsp").forward(request, response);
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		response.setCharacterEncoding("UTF-8");
		// 判断form的enctype是否为multipart请求
		if (!ServletFileUpload.isMultipartContent(request)) {
			throw new RuntimeException("当前请求不支持！");
		}
		try {
			String fileValue = null ;
			// 创建FileItem工产
			DiskFileItemFactory factory = new DiskFileItemFactory();
			//设置使用临时文件的边界值，大于该值（1M）上传文件将保存在临时文件中，反之，写入内存中
			factory.setSizeThreshold(1024*1024*1);//设置边界值为1M
			//设置临时文件
			String tempPath = this.getServletContext().getRealPath("/temp");
			File temp = new File(tempPath);
			factory.setRepository(temp);
			// 创建文件上传核心組件
			ServletFileUpload upload = new ServletFileUpload(factory);
			// 解决上传的文件名乱码
			upload.setHeaderEncoding("UTF-8");
			// 解析请求
			List<FileItem> items = upload.parseRequest(request);
			//遍历items
			for(FileItem item :items){
				if(item.isFormField()){//是普通表单项目
					String fieldName = item.getFieldName();//获得name值
					fileValue = item.getString();//获得value值
					System.out.println(fieldName+":"+fileValue);
				}else{//不是普通表单项目
					//上传文件的原始名称
					String fileName = item.getName();
					//解决上传文件重名
					fileName = System.currentTimeMillis()+ fileName;
					//获取输入流
				    InputStream is = item.getInputStream();
				    //获取文件保存在服务器的imgs文件夹中
				    String path = this.getServletContext().getRealPath("/imgs");
				    response.getWriter().write(path+"\\"+fileValue+"\\"+fileName);
				    path = path+"/"+fileValue;
				    File dirFile = new File(path);
				    if(!dirFile.exists()){
				    	dirFile.mkdir();
				    }
					//创建目标文件，用来存放用户上传的文件
				    File descFile = new File(path ,fileName);
				    //创建文件输出流
				    OutputStream os = new FileOutputStream(descFile);
				    //将输入流的数据写入到输出流中
				    int len = -1;
				    byte[] buffer = new byte[1024];
				    while((len = is.read(buffer)) != -1){
				    	os.write(buffer,0,len);
				    }
				    //关闭流
				    os.close();
				    is.close();
					item.delete();//删除临时文件
				}
			}
		} catch (FileUploadException e) {
			e.printStackTrace();
		}
	}