jQuery使用Base64 生成圖片預覽和java後臺不同的接收處理方式
阿新 • • 發佈:2019-01-04
本文主要解決移動或者pc端上傳圖片及生成預覽的問題
1.jQuery 生成base64編碼,前臺預覽
2.jsp 自定義上傳按鈕兩種方式的上傳 input file 和 input hidden
3.java後臺兩種方式的上傳操作 SpringMvc自身的上傳機制和Base64解碼上傳的操作
jQuery程式碼:
<script type="text/javascript">
$(function(){
// 前端只需要給input file繫結這個change事件即可(下面兩個方法不需要修改)獲取到圖片
$('.testUpload').bind('change',function (event){
var imageUrl = getObjectURL($(this)[0].files[0]);
convertImgToBase64(imageUrl, function(base64Img){
//base64Img為轉好的base64,放在img src直接前臺展示(<img src="data:image/jpg;base64,/9j/4QMZRXh...." />)
//alert(base64Img);
$("#base").attr("src",base64Img);
//base64轉圖片不需要base64的字首data:image/jpg;base64
//alert(base64Img.split(",")[1]);
$("#uploadFile").val(base64Img.split(",")[1]);
});
event.preventDefault();
});
//生成圖片的base64編碼
function convertImgToBase64(url, callback, outputFormat){
//html5 的convas畫布
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var img = new Image;
img.crossOrigin = 'Anonymous';
img.onload = function(){
var width = img.width;
var height = img.height;
// 按比例壓縮4倍
//var rate = (width<height ? width/height : height/width)/4;
//原比例生成畫布圖片
var rate = 1;
canvas.width = width*rate;
canvas.height = height*rate;
ctx.drawImage(img,0,0,width,height,0,0,width*rate,height*rate);
// canvas.toDataURL 返回的是一串Base64編碼的URL,當然,瀏覽器自己肯定支援
var dataURL = canvas.toDataURL(outputFormat || 'image/png');
callback.call(this, dataURL);
canvas = null;
};
img.src = url;
}
//createobjecturl()靜態方法建立一個包含了DOMString代表引數物件的URL。該url的宣告週期是在該視窗中.也就是說建立瀏覽器建立了一個代表該圖片的Url.
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined){
// basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined){
// mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined){
//web_kit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
</script>
Jsp程式碼
<!-- 把input file透明度設定為0,隱藏在圖片的後面實現自定義上傳按鈕 -->
<form id="uploadImg" method="post" enctype="multipart/form-data" action="${contextPath }/uploadImg.html">
<div style='position:relative; '>
<img id="base" style="position: absolute;" alt="上傳" src="${contextPath }/img/upload.jpg">
<!-- 使用file上傳時,上傳的是一個file型別的檔案 到後臺 -->
<input type="file" style="position:absolute; opacity:0;" name="files" class="testUpload">
<!-- 使用base64 上傳時,是把base64 編碼的字串傳入後臺 -->
<input type="hidden" name="baseFile" id="uploadFile">
</div>
<div id="subInfo" style="cursor:pointer;margin-left:50px; width: 100px; height: 40px; font-size: 16px; background-color: #2d78f4; color:#FFFFFF; text-align: center; border: 1px solid #2129FB; " >
<div style="height: 8px;" > </div>
提交
</div>
</form>
java程式碼
@RequestMapping("uploadImg")
public ModelAndView uploadImg(String[] baseFile, HttpServletRequest request) throws IllegalStateException, IOException{
ModelAndView mav = new ModelAndView();
mav.setViewName("MyJsp");
mav.addObject("mes", "Success!!!");
/**
* springMvc 上傳圖片
* 1.enctype屬性的屬性值設為multipart/form-data。
* 2.input的type屬性的屬性值設為file。
* 後臺就可以使用multipartResolver獲取到前臺上傳的檔案
*/
/*
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
if(multipartResolver.isMultipart(request)){
MultipartHttpServletRequest multipertRequest = (MultipartHttpServletRequest)request;
Iterator<String> iter = multipertRequest.getFileNames();
//上傳一張圖片時可以直接使用這個
//MultipartFile file11 = multipertRequest.getFile("files");
//上傳多張圖片
while (iter.hasNext()) {
MultipartFile file = multipertRequest.getFile((String)iter.next());
if(!file.isEmpty()){
String path = request.getSession().getServletContext().getRealPath("uploadImg");
String imageName = this.getImageName();
//File.separator路徑分隔符
File savefile = new File(path+File.separator+imageName);
//file.transferTo將上傳的檔案寫入指定位置
file.transferTo(savefile);
}
}
}*/
/**
* Base64 上傳圖片
*/
String path = request.getSession().getServletContext().getRealPath("uploadImg");
Base64 base64 = new Base64();
String[] imageNames = new String[baseFile.length];
//file 為前臺隱藏域裡面的字串
if(baseFile!= null && baseFile.length!=0){
int index = 0;
for (String base64Str : baseFile) {
//base64 解碼
byte[] byteArray = base64.decode(base64Str);
// 調整異常資料
for (byte b : byteArray) {
if(b<0)
b+=256;
}
String imageName = this.getImageName();
try {
OutputStream out = new FileOutputStream(path+File.separator+imageName);
out.write(byteArray);
out.close();
} catch (Exception e) {
e.printStackTrace();
System.out.println(imageNames[0]);
}
imageNames[index] = path+File.separator+imageName;
index ++ ;
}
}
System.out.println(imageNames[0]);
return mav;
}
/**
* 根據系統規則得到圖片名稱
*/
public String getImageName(){
return UUID.randomUUID().toString()+".jpg";
}