图片上传前后端交互

实现：进行路径映射，使用Jquery Ajax技术发送异步请求

html：

<div class="tupian">
 <span>图片:</span>
	 <!--存放上传显示的图片-->
    <img src="${ctx }${user.imgUrl }" id="img" height="50">

    <!--type="file"从本地查找图片，当图片发生改变时触发uploadImg()方法-->

    <input type="file" onchange="uploadImg();" id="file">

    <!--设置隐含域，存放imgurl所对应的value-->
    <input type="hidden" name="imgUrl" id="imgUrl">
    <!--当保存时触发点击事件-->
    <input id="button" type="button" value="保存" onclick="submit()">
 </div>

导入js包，这里的${ctx}是使用了EL表达式，这里不懂可关注我，其他文章有详细介绍

<script src="${ctx }/js/jquery-3.3.1.min.js"></script>

Jquery Ajax实现图片上传，但还没保存到数据库


<script>

  function uploadImg(){
	  var formData = new FormData();
		formData.append('file', $('#file')[0].files[0]);
		var config = {
                //发送请求的地址
				"url":"/Shop/UploadServlet",//必须
				"async" : true,//是否异步 ，默认是
				"contentType" : false,
				"processData":false,
				"dataType" : "text",//服务器返回数据类型，默认是text(文本)，假如写为json,会        调用JSON.parse()，将字符串转换为Json对象
				"type":"post",//请求方式
				"data":formData,//请求字段
				"success" : function(result){
                    //当发送成功时将图片路径添加到id为img的src属性当中
					$("#img").attr("src",ctx+result);
                    //把路径写到id为imgUrl的值当中
					$("#imgUrl").val(result);
				},//请求成功后调用，必须
				"error":function(xhr,status,error){
					
					
				}//请求失败调用的参数
		};
        //进行异步请求
		$.ajax(config);
	
	}


  </script>

后台处理代码

try {
			    //设置ContentType字段值
			response.setContentType("text/html;charset=utf-8");//请求返回格式为html
			//创建DiskFileItemFactory工厂对象
			DiskFileItemFactory factory = new DiskFileItemFactory();
			//设置临时文件夹，如果不存在则新建
			File f = new File("D:\\temp");
			if(!f.exists()) {
				f.mkdirs();//不存在 则新建 
			}
			//设置缓存路径 
			factory.setRepository(f);
			//新建ServletFileUpload对象
			ServletFileUpload fileupload = new ServletFileUpload(factory);
			//设置字符编码 
			fileupload.setHeaderEncoding("utf-8");
			//解析request，得到 FileItem对象
			List<FileItem> list = fileupload.parseRequest(request);
			//获取相应 字符流 
			PrintWriter writer = response.getWriter();
			//遍历请求字段 
			for(FileItem item : list) {
				//判断是否为普通元素
				if(item.isFormField()) {//普通表单元素
					//获取字段名和字段值 
					String name = item.getFieldName();//获取字段名
					String value = item.getString("utf-8");//获取字段值
					writer.print(name + ":" + value);
				}else {//文件
					//获取上传的文件名 
					String filename = item.getName();//有可能包括文件夹,D:\ATA\bearer\qgenericbearer.ddl
					if(filename != null && !filename.trim().equals("")) {
						//截取文件名
						filename = filename.substring(filename.lastIndexOf("\\") + 1);//qgenericbearer.ddl
						//确保保存到服务器上的文件名要唯一
						filename = UUID.randomUUID() + "_" + filename;//UUID.randomUUID()获取随机的uuid值，不会重复
						//创建保存上传文件的文件夹,不能保存到项目目录下
						String uploadPath = "D:\\upload\\";//上传路径	
						
						File file = new File(uploadPath + filename);// D:\\upload\\qgenericbearer.ddl.
						file.getParentFile().mkdirs();//创建upload文件夹
						file.createNewFile();//创建文件qgenericbearer.ddl
						//从上传文件中写数据到新建的文件里
						//获取上传文件输入流
						InputStream in = item.getInputStream();
						//是用FileOutputStream打开服务器端的文件,也就是新建的qgenericbearer.ddl
						FileOutputStream out = new FileOutputStream(file);
						byte[] buffer = new byte[1024];
						int len;
						//读取上传文件的字节，并写入到服务器
						while((len = in.read(buffer)) > 0) {
							out.write(buffer,0,len);
						}
						//关闭流
						in.close();
						out.close();
						//删除临时文件
						item.delete();
						
						writer.write("/upload/" + filename);
					}
				
				}
			}
			
		}catch (Exception e) {
			// TODO: handle exception
		}

点击保存按钮把图片保存到数据库

  <script> 
function submit(){
      //获取图片路径	  
	  var imgUrl=$("#imgUrl").val();	 
	  var config={
        //发送到后台的具体路径
		"url":"/UpdateUserServlet",	
        //进行异步请求
		"async":true,
        //发送方式为post
		"type":"post",
        //发送数据
		"data":{
			"imgUrl":imgUrl,
		},
		"success":function(result){
            //发送成功时的响应
			alert(result);			
		},
		"error":function(xhr,status,error){
			
		}
	  };
	  $.ajax(config);
  }
  
  </script>

到了最后路径映射了，想想都激动了吧！这个功能就要大功告成了。

这里配置要找对路

找到server.xml