springMVC ajax 图片上传

springMVC ajax 图片上传

一 前台
 1、<input  type="text" class="dfinput"  name="title" id ="title"  required="required" style="width:518px;"/> required="required" 表示输入框必填
<script src="${pageContext.request.contextPath}/static/js/ajaxfileupload.js"></script>
 (在povertyalleviation=》精准扶贫项目中)
js 
 /*ajax 上传资源*/
	  function uploadResoures() {
		    var fileUpload=$("#file").val();
	        if($("#file").val() != "") {
	            $.ajaxFileUpload({
	                type: "POST",
	                url:"${pageContext.request.contextPath}/uploadResoures.do",
	                dataType: "json",
	                fileElementId:"file",  // 文件的id
	                success: function(data){
	                    if(data.filename!='') {   
	                       alert("保存路径："+data.fileSavePath+"显示路径:"+data.relativefileSavePath);
	                       //图片显示
	                        $("#showImg").attr("src",data.filename2);
	                      $("#picture_path").attr("value",data.fileSavePath);//赋值文件存放路径
	                      $("#filename").attr("value",data.fileName);//赋值文件名称
	                      //视频播放
	                      $("#video-box video").prop("src",data.relativefileSavePath);//source 里的 src 只会在渲染的时候被 check 一次.需要prop
	                      // 自动播放
	                      $(".videoClass")[0].play();
	                    }
	                },
	                async:false,//同步
	                error: function () {
	                    alert("上传失败");
	                },
	            });
	        } else {
	            alert("请先选择文件");
	        }
	    }
html
<div class="form-group" style="" id="video-box">
				    <input type="file" name="file" id="file" multiple class="file-loading" onchange="uploadResoures()" />
                    <video width="350" height="200"  controls="controls"  class="videoClass" style="">
			             <source src="" type="video/mp4" id="resourcesPathShow" name="resourcesPathShow">
	                </video> 
	                <input  type="hidden" class="dfinput"  name="picture_path" id ="picture_path"  style="width:518px;"/>
                     <input  type="hidden" class="dfinput"  name="filename" id ="filename"  style="width:518px;"/>
       </div>

二 后台

   /**
	 * 
	 * @Description 
	 * ajax 上传文件  改方式为 只支持 jdk1.7以上+tomcat8.0资源上传
	 * @Author jacpan
	 * @Date 2022年2月17日23:19:25
	 * @return
	 */
	@RequestMapping(value="/uploadResoures.do")
	@ResponseBody
	public Map<String, Object>  uploadResoures(HttpServletRequest req,ResouresUpload res,
			@RequestParam(value = "file") MultipartFile file, Model model, 
    		HttpServletRequest request){
		Map<String, Object> map=new HashMap<String, Object>();
		String fileName="";
		//获取工程名(获取绝对位置)
		String conetextPath=request.getSession().getServletContext().getContextPath();
		//上传文件
		if (!file.isEmpty()) {
			    fileName= file.getOriginalFilename();  // 文件名
		        String suffixName = fileName.substring(fileName.lastIndexOf("."));  // 后缀名
		        //String filePath = "D://temp-rainy//"; // 上传后的路径
		        String filePath = request.getSession().getServletContext().getRealPath("/fileStorage/");//文件存放位置
		        fileName = UUID.randomUUID() + suffixName; // 新文件名
		        File dest = new File(filePath+fileName);
		        if (!dest.getParentFile().exists()) {
		            dest.getParentFile().mkdirs();
		        }
		        try {
		            file.transferTo(dest);//把浏览器上传的文件复制到希望的位置
		        } catch (IOException e) {
		            e.printStackTrace();
		        }
        }
		String fileSavePath ="/fileStorage/" + fileName;
		String relativefileSavePath =conetextPath+"/fileStorage/"+ fileName;
		System.out.println("图片上传路径："+fileSavePath);
		map.put("fileName", fileName);
		map.put("fileSavePath", fileSavePath);
		map.put("relativefileSavePath", relativefileSavePath);
		return map;
	}