JAVA實現客戶端圖片上傳至服務器（SSM）（不使用input 標籤使用，瀏覽器圖片直接上傳服務器）
這是本人第一篇博客 想着記錄一下平時學習的過程，也提供給和我一樣正在學習java的同學們！！（如果有不懂的同學歡迎留言 有時間一定回覆，寫的不好的地方請多包涵）
*
開始：
首先要寫這篇博客的目的是因爲 跟進的項目需求 實現截圖上傳到服務器並在數據庫中保存圖片在服務器的路徑！本人當時採取了以下方法：
1.使用java截圖並保存到本地（不懂的同學可以參考"https://blog.csdn.net/sanluo11/article/details/61923549"）
這種方法並不能滿足我的需求，因爲java截取的圖片是服務器端的圖片對於web項目這顯然不能達到需求，因爲要截取客戶端（瀏覽器）的圖片。於是採用方法二
2.使用<input type='file'>標籤 進行文件上傳（此方法確實可以實現，有需要的同學可以參考"https://blog.csdn.net/swingpyzf/article/details/20230865"）
這種方法同樣不能滿足需求 因爲要截圖上傳服務器 客戶本地存放圖片沒有任何意義 而且需要使用<input>標籤去選擇 所以最後 經過不斷百度總結 實現了方法三（構建file文件通過request攜帶到controller層進行獲取）
3. html2canvas實現截圖 使用Ajax. form表單進行提交及構造file文件
廢話不多說 上代碼：
(1).html2canvas實現屏幕截圖：
HTML部分：
<form method="post" id="file" action="" enctype="multipart/form-data">
<div class="screen">
<span class="text-info">截屏區域:</span>
<span class="text-info">處理人:${user.userName}</span>
<%--<input id="picture" type="button" class="btn btn-default btn-sm btn-info" onclick="capture()" value="截屏">--%>
<input id="picture" type="button" class="btn btn-default btn-sm btn-info" value="截屏">
</div>
<div class="submit">
<input class="btn btn-primary" name="提交" type="button" onclick="captureScreen();" value="提交">
</div>
</form>
JS部分：
var myFile;
//#picture是截屏按鈕的id值
$("#picture").on("click", function(event) {
if(i<3) {
event.preventDefault();
var w=window.innerWidth;
var h=window.innerHeight;
var canvas=document.createElement("canvas");
canvas.height=w*2;
canvas.width=w*2;
canvas.style.height=w+"px";
canvas.style.width=h+"px";
var context=canvas.getContext("2d");
context.scale(2,2)
html2canvas(document.body, {
// html2canvas($("#apDiv"), {
canvas:canvas,
allowTaint: true,
taintTest: false,
onrendered: function (canvas) {
canvas.id = "mycanvas";
//document.body.appendChild(canvas);
//生成base64圖片數據
dataUrl = canvas.toDataURL();
//#picturelists是自己構建一個div id是#picturelists去顯示截圖
$("#picturelists").append('<img onclick="big(this)" id="img' + i + '"class="screenPicture" style="width:100px;height:100px;margin: 5px; border: 1px solid black" src=' + dataUrl + '>');
i++;
//將base64轉化爲file
var timestamp =makeid();
filename=timestamp+".jpg";
console.log(filename);
myFile.push(dataURLtoFile(dataUrl, timestamp+'.jpg'));
capture();
}
});
}
else {
alert("最多隻能存放三張！");
}
});
效果圖如下：
(2).*最關鍵的部分（base64與file文件的轉換）
//將base64轉換爲文件
function dataURLtoFile(dataurl, filename) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}
（3).提交按鈕實現文件上傳
JS部分：
function uploadFiles(){
//獲取第一張截圖
var file1=myFile.pop();
//獲取第二張截圖
var file2=myFile.pop();
//獲取第三張截圖
var file3=myFile.pop();
var form=document.getElementById("file");
//使用ajax提交form表單
var uploadFile = new FormData(form)；
uploadFile.append("files",file1);
uploadFile.append("files",file2);
uploadFile.append("files",file3);
if("undefined" != typeof(uploadFile) && uploadFile != null && uploadFile != "") {
$.ajax({
url: 'file/fileupload.do',
type: 'POST',
data: uploadFile,
async: false,
cache: true,
contentType: false, //不設置內容類型
processData: false, //不處理數據
error: function () {
alert("上傳失敗！");
}
});
}
}
到此文件已經可以被form表單所攜帶到controller層，接下來我們只需要後臺獲取文件並上傳到服務器即可。
(4).
java代碼：
@Controller
@RequestMapping("/file")
public class fileupload {
@RequestMapping(value = "/fileupload.do" ,method= RequestMethod.POST)
@ResponseBody
public String upload( HttpServletRequest request) throws IOException {
//將request轉換成文件上傳的MultipartHttpServletRequest
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
//獲取三張傳過來的圖片（file）
List<MultipartFile> files=multipartRequest.getFiles("files");
//獲取服務器端路徑存放到'updata'路徑下
String path = request.getSession().getServletContext().getRealPath("updata");
if (files.isEmpty()) {
return "false";
}
for (MultipartFile file : files) {
String fileName = file.getOriginalFilename();
int size = (int) file.getSize();
System.out.println(fileName + "-->" + size);
if (file.isEmpty()) {
return "false";
} else {
File dest = new File(path + "/" + fileName);
if (!dest.getParentFile().exists()) {
// 判斷文件父目錄是否存在
dest.getParentFile().mkdir();
}
try {
//文件上傳服務器
file.transferTo(dest);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
return "false";
}
}
}
return "true";
}
}
效果圖：
到此你可以去服務器端看下updata目錄下是否有你之前的三張圖片了。
如果有什麼問題歡迎留言討論！本人第一篇博客如有不好 請諒解 以後會多多改善！！！！