/* * 图片上传 */@RequestMapping("/uploadFile") @ResponseBody public String uploadFile(@RequestParam(value = "imageAddr", required = false)String imageAddr,@RequestParam(value = "genre", required = false)String genre,@RequestParam(value = "uploadFile", required = false) MultipartFile uploadFile,HttpServletRequest request, HttpServletResponse response){ MapresultMap=new HashMap(); //获取当前时间 File.separator等同于/或者\\ String fileFolder = File.separator + DateUtil.getYear(new Date()) + File.separator + DateUtil.getMonth(new Date()) + File.separator + DateUtil.getDay(new Date()); String fileName =uploadFile.getOriginalFilename();//获取文件上传的名称 String newFileName=""; //获取照片类型 人员/车辆 System.out.println(fileName);
System.out.println(genre+imageAddr); try { String uploadPath="";//图片上传的目录 InputStream in = this.getClass().getResourceAsStream("/conf.properties"); Properties props = new Properties(); InputStreamReader inputStreamReader = new InputStreamReader(in, "UTF-8"); props.load(inputStreamReader); if("renyuan".equals(genre)) { uploadPath = props.getProperty("renyuan_Upload_path")+fileFolder; }else if ("cheliang".equals(genre)) { uploadPath = props.getProperty("cheliang_Upload_path")+fileFolder;} //重新命名 if(null!=fileName){ newFileName=UUID.randomUUID ()+fileName.substring (fileName.lastIndexOf (".")); } File files=new File(uploadPath,newFileName); if(!files.exists ()){ files.mkdirs (); } uploadFile.transferTo (files); resultMap.put("fileAdress",fileFolder+File.separator+newFileName); resultMap.put("imageAddr",imageAddr); resultMap.put("uploadFlag",true); } catch (Exception e) { resultMap.put("uploadFlag",false); //记日志 } String json=JSONObject.toJSONString(resultMap).toString(); writeJson(json,response); return null; }/** 写入数据*/ private void writeJson(String json, HttpServletResponse response) { response.setContentType("application/json;charset=UTF-8"); PrintWriter out = null; try { out = response.getWriter(); out.print(json); out.flush(); } catch (Exception e) { e.printStackTrace(); } finally { if (null != out) { out.close(); } } }
上面是上传图片的控制层
下面是上传图片的ajax提交
function upload(path) { var form = new FormData();var xx = $(":input[name='uploadName']").val(); var ImageName = document.getElementsByName("uploadName")[0].value; var uploadName = ImageName.name; alert(ImageName); var genre=$(":input[name='genre']").val(); var imageAddr=$(":input[name='imageAddr']").val(); //追加图片类型 人员/车辆 form.append(genre,genre); //追加回传照片地址 form.append(imageAddr,imageAddr); form.append(uploadName,ImageName);alert(path); $.ajax({ type: "POST", url:"uploadFile", contentType:'multipart/form-data', data:form, // 下面三个参数要指定，如果不指定，会报一个JQuery的错误 cache: false, contentType: false, processData: false, async: false, success: function(data) { console.log(data); if(data.uploadFlag==true){ alert("上传成功");console.log("地址"+data.imageAddr);console.log("图片名"+data.fileAdress); alert(data.imageAddr); alert(data.fileAdress); //往input框里传值 document.getElementById(data.imageAddr).value=data.fileAdress; $("#ImgPr").attr("src",data.fileAdress); }else{ alert("上传出错"); } } });}
多个form表单提交
图片预览可以在网上很多素材 也可以用下面发的那个 也可以上传完成后拿回传的图片路径追加给img的src显示
jQuery.fn.extend({uploadPreview : function(opts) {var _self = this, _this = $(this);opts = jQuery.extend({Img : "ImgPr",Width : 100,Height : 100,ImgType : [ "gif", "jpeg", "jpg", "bmp", "png" ],Callback : function() {}}, opts || {});_self.getObjectURL = function(file) {var url = null;if (window.createObjectURL != undefined) {url = window.createObjectURL(file)} else if (window.URL != undefined) {url = window.URL.createObjectURL(file)} else if (window.webkitURL != undefined) {url = window.webkitURL.createObjectURL(file)}return url};_this.change(function() {if (this.value) {if (!RegExp("\.(" + opts.ImgType.join("|")+ ")$", "i").test(this.value.toLowerCase())) {alert("选择文件错误,图片类型必须是"+ opts.ImgType.join("，")+ "中的一种");this.value = "";return false}//高版本Jquey使用 if ($.support.leadingWhitespace)if ($.support.leadingWhitespace) { //低版本jquery中使用$.browser.msieconsole.log(_self.getObjectURL(this.files[0]));try {_this.parent('div').find("." + opts.Img).attr('src',_self.getObjectURL(this.files[0]));} catch (e) {var src = "";var obj = _this.parent('div').find("." + opts.Img);var div = obj.parent("div")[0];_self.select();if (top != self) {window.parent.document.body.focus()} else {_self.blur()}src = document.selection.createRange().text;document.selection.empty();obj.hide();obj.parent("div").css({'filter' : 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)','width' : opts.Width+ 'px','height' : opts.Height+ 'px'});div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src}} else {_this.parent('div').find("." + opts.Img).attr('src',_self.getObjectURL(this.files[0]))}opts.Callback()}})}});$(".up").click(function() {$(this).uploadPreview({Img : "ImgPr"});})
