1.H5的圖片上傳方式

前臺代碼:

1 <form action="<%=basePath%>open/njResult.shtml" id="njForm" method="post"> 2 <input id="photoPath" type="hidden" name="photoPath"> 3 </form> 4 　　<div class="noUld_upB g-clear"> 5 　　　　<div class="noUld_up"> 6 <img class="noUld_up_img" data-up="img" src="<%=basePath %>resources/img/all/other_addImg.png"> 7 <div class="noUld_up_cnt g-clear"> 8 <div class="fl">請上傳圖片</div> 9 <div class="noUld_up_cnt_r"><span class="btn-s">上傳</span><input type="file" id="notPassPhoto" data-up="file"></div> 10 </div> 11 </div> 12 　　　　　　 13 　　　　　　　　<div class="yesCek_submit"> 14 　　　　　　　　　　<a id="njSumit" href="javascript:void(0)" class="btn-b">提交</a> 15 　　　　　　　　</div>

JS代碼:

1 //圖片上傳change事件 2 $("#notPassPhoto ").change(function(){ 3 uploadBtnChange("notPassPhoto","photoPath");//上傳圖片改變時,調用base64壓縮方法 4 5 }); 6 $('#njSumit').click(function(){ 7 var photoPath = document.getElementById('photoPath').value;//獲得壓縮后的base64數據 8 if(photoPath){ 9 var ranparam = Math.random(); 10 $.ajax({ 11 url:"njNotPassPhoto.shtml", 12 type: "POST", 13 data:{'notPassphotoPath':photoPath,"ranparam":ranparam}, //把base64數據傳到后臺,由后臺解碼上傳到服務器 14 async : false, 15 cache : false, 16 success:function(data) { 17 if(data.status==200){ 18 $("#photoPath").val(data.photoPath);//獲得了傳回來的圖片路徑,用于保存到數據庫 19 $("#njForm").submit();//表單提交 20 }else{ 21 alert(data.msg); 22 } 23 }, 24 error: function(XMLHttpRequest, textStatus, errorThrown){ 25 alert(XMLHttpRequest.readyState + XMLHttpRequest.status + XMLHttpRequest.responseText); 26 } 27 }); 28 }else{ 29 alert("請上傳照片") 30 return 31 } 32 } 33 34 }); 35 function uploadBtnChange(id,val){ 36 var scope = this; 37 if(window.File && window.FileReader && window.FileList && window.Blob){ 38 // 獲取上傳file 39 var filefield = document.getElementById(id), 40 file = filefield.files[0]; 41 // 獲取用于存放壓縮后圖片base64編碼 42 var compressValue = document.getElementById(val); 43 processfile(file,compressValue); 44 }else{ 45 alert("此瀏覽器不完全支持壓縮上傳圖片"); 46 } 47 } 48 49 function processfile(file,compressValue) { 50 var reader = new FileReader(); 51 reader.onload = function (event) { 52 var blob = new Blob([event.target.result]); 53 window.URL = window.URL || window.webkitURL; 54 var blobURL = window.URL.createObjectURL(blob); 55 var image = new Image(); 56 image.src = blobURL; 57 image.onload = function() { 58 var resized = resizeMe(image); 59 compressValue.value = resized; 60 } 61 }; 62 reader.readAsArrayBuffer(file); 63 } 64 65 function resizeMe(img) { 66 // 壓縮的大小 67 var max_width = 800; 68 var max_height = 600; 69 70 var canvas = document.createElement('canvas'); 71 var width = img.width; 72 var height = img.height; 73 if(width > height) { 74 if(width > max_width) { 75 height = Math.round(height *= max_width / width); 76 width = max_width; 77 } 78 }else{ 79 if(height > max_height) { 80 width = Math.round(width *= max_height / height); 81 height = max_height; 82 } 83 } 84 85 canvas.width = width; 86 canvas.height = height; 87 88 var ctx = canvas.getContext("2d"); 89 ctx.drawImage(img, 0, 0, width, height); 90 // 壓縮率 91 return canvas.toDataURL("image/jpeg",0.92); 92 }

后臺代碼:

1 /** 2 * Base64解碼上傳 3 */ 4 @RequestMapping(value = "/njNotPassPhoto", method = RequestMethod.POST) 5 @ResponseBody 6 public Map<String, Object> njNotPassPhoto(String notPassphotoPath) { 7 try { 8 String photoPath = FileUploadUtils.getPath(notPassphotoPath); 9 resultMap.put("status", 200); 10 resultMap.put("photoPath", photoPath); 11 return resultMap; 12 } catch (Exception e) { 13 e.printStackTrace(); 14 resultMap.put("status", 500); 15 resultMap.put("msg", "服務器異常"); 16 } 17 return null; 18 19 } FileUploadUtils工具類代碼:
1 public class FileUploadUtils { 2 private static SimpleDateFormat format = new SimpleDateFormat("yyyyMMdd"); 3 4 public static String getPath(String base64) throws IOException { 5 6 String saveFileName = System.currentTimeMillis() 7 + RandomStringUtils.random(6, true, true) + ".jpg"; 8 Date date = new Date(); 9 String datePath = format.format(date); 10 String upload = "D:\\suyi\\photo\\" + datePath + "\\"; 11 12 String path = upload + saveFileName; 13 // base64圖片解碼 14 // 對字節數組字符串進行Base64解碼并生成圖片 15 if (base64 == null) // 圖像數據為空 16 return ""; 17 base64 = base64.replaceAll("data:image/jpeg;base64,", ""); 18 BASE64Decoder decoder = new BASE64Decoder(); 19 byte[] b = decoder.decodeBuffer(base64); 20 for (int i = 0; i < b.length; ++i) { 21 if (b[i] < 0) {// 調整異常數據 22 b[i] += 256; 23 } 24 } 25 26 File dir = new File(upload); 27 if (!dir.exists()) { 28 dir.mkdirs(); 29 } 30 String fileName = path; 31 File file = new File(fileName); 32 OutputStream out = new FileOutputStream(file); 33 out.write(b); 34 out.flush(); 35 out.close(); 36 String ImagePath = "/suyi/showImage?imgId=" + datePath + "_" 37 + saveFileName; 38 return ImagePath; 39 40 } 41 }

?

?

?

轉載于:https://www.cnblogs.com/future-eye/p/8267816.html

總結

以上是生活随笔為你收集整理的微信端上传图片方式1的全部內容，希望文章能夠幫你解決所遇到的問題。

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