springMVC 通过form表单上传文件（图片和视频）、通过ajax上传图片（可与其他参数一起）

1.通过form表单上传图片或文件

直接复制就可以运行的

jsp层代码

<!--  <form action="pow/upload" method="post" enctype="multipart/form-data"> 
		    	<input type="file"  name="file" id="picpath" />  
		    	<button class="btn btn-info">上传</button>
		    </form> 
		    <img alt="" src="E:/java项目/maven/power/power/src/main/webapp/img/wdt.jpg"> -->

controller层代码

  @RequestMapping("/upload")
    	@ResponseBody
    	public String addUser(@RequestParam("file") CommonsMultipartFile[] files, HttpServletRequest request) {
	for (int i = 0; i < files.length; i++) {
		System.out.println("fileName---------->" + files[i].getOriginalFilename());
		SimpleDateFormat fmt = new SimpleDateFormat("HH点mm");
		// 上传的绝对路径
		File file = new File(
				"E:\\java项目\\maven\\power\\power\\src\\main\\webapp\\img\\" + files[i].getOriginalFilename());
		if (!files[i].isEmpty()) {
			int pre = (int) System.currentTimeMillis();
			try {
				// 拿到输出流，同时重命名上传的文件
				FileOutputStream os = new FileOutputStream(file);
				// 拿到上传文件的输入流
				FileInputStream in = (FileInputStream) files[i].getInputStream();
				// 以写字节的方式写文件
				int b = 0;
				while ((b = in.read()) != -1) {
					os.write(b);
				}
				os.flush();
				os.close();
				in.close();
				int finaltime = (int) System.currentTimeMillis();
				System.out.println(finaltime - pre + "ms");

			} catch (Exception e) {
				e.printStackTrace();
				System.out.println("上传出错");
			}
		}
	}
	return "/success";
}

form表单结束

2.通过ajax上传图片
演示：


前端html代码：

	<a href="javascript:void(0)" onclick="uploadPhoto()">选择图片</a>
	<input type="file" id="photoFile" style="display: none;" onchange="upload()">
	<img id="preview_photo" src="" width="200px" height="200px">

css：

/* 去除图片预览未选择时默认时的边框 */
	img[src=""],img:not([src]){
		opacity:0;
	}

js:

		function uploadPhoto() {
			$("#photoFile").click();
		}
		/* 上传图片 */
		function upload() {
			if ($("#photoFile").val() == '') {
				return;
			}
			var formData = new FormData();
			//$("#photoFile")不起作用
			formData.append('photo', document.getElementById('photoFile').files[0]);
			//可与文件一起传到后台  后台接收代码在下面
			// formData.append('name',"cth");
			$.ajax({
				url:"http://192.168.0.104:8080/dingning/dn/uploadPhoto",
				type:"post",
				data: formData,
				//contentType,processData不加会报非法请求
				contentType: false,
				processData: false,
				success: function(data) {
					//返回map集合
					if (data.type == "success") {
						//照片回显 （刷新页面后照片不显示）解决：把路径存入到数据库然后通过调用数据库显示图片
						$("#preview_photo").attr("src", "http://192.168.0.104:8080"+data.filepath+data.filename);
						alert(data.filepath+data.filename)
						// $("#productImg").val(data.filename);
						zeroModal.alert("上传成功！")
					} else {
						zeroModal.alert(data.msg);
					}
				},
				error:function(data) {
					zeroModal.alert("上传失败")
				}
			});
		}

java后端代码
Controller层：

我是存到本项目路径 建议把图片保存到服务器 然后将图片路径保存在数据库
前端访问的时候 直接ajax获取数据库路径即可显示

/**
     * 图片上传到本项目路径
     * @param photo
     * @param request
     * @return
     */
    @RequestMapping(value = "/uploadPhoto", method = RequestMethod.POST)
    @ResponseBody
    public Map<String, String> uploadPhoto(MultipartFile photo, HttpServletRequest request) {
   		MultipartHttpServletRequest multipartRequest=(MultipartHttpServletRequest) request; 
    	//接收dataform数据用getParameter
    	System.out.println(multipartRequest.getParameter("name"));
        Map<String, String> map = new HashMap<String, String>();
        if (photo == null) {
        	map.put("type", "error");
        	map.put("msg", "选择要上传的文件！");
            return map;
        }
        if (photo.getSize() > 1024 * 1024 * 10) {
        	map.put("type", "error");
        	map.put("msg", "文件大小不能超过10M！");
            return map;
        }
        //获取文件后缀
        String suffix = photo.getOriginalFilename().substring(photo.getOriginalFilename().lastIndexOf(".") + 1, photo.getOriginalFilename().length());
        if (!"jpg,jpeg,gif,png".toUpperCase().contains(suffix.toUpperCase())) {
        	map.put("type", "error");
        	map.put("msg", "请选择jpg,jpeg,gif,png格式的图片！");
            return map;
        }
        //获取项目根目录加上图片目录 webapp/static/imgages/upload/
        String savePath = request.getSession().getServletContext().getRealPath("/") + "/img/upload/";
        File savePathFile = new File(savePath);
        if (!savePathFile.exists()) {
            //若不存在该目录，则创建目录
            savePathFile.mkdir();
        }
        String filename = new Date().getTime() + "." + suffix;
        try {
            //将文件保存指定目录
            photo.transferTo(new File(savePath + filename));
        } catch (Exception e) {
        	map.put("type", "error");
        	map.put("msg", "保存文件异常！");
            e.printStackTrace();
            return map;
        }
        map.put("type", "success");
        map.put("msg", "上传图片成功！");
        map.put("filepath", request.getSession().getServletContext().getContextPath() + "/img/upload/");
        map.put("filename", filename); 
        return map;
    }