/* * 圖片上傳 */@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.msie console.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"});})

?

轉載于:https://www.cnblogs.com/dahei96/p/9283897.html

總結

以上是生活随笔為你收集整理的form表单的一个页面多个上传按钮实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。