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目录下是否有你之前的三张图片了。
如果有什么问题欢迎留言讨论！本人第一篇博客如有不好 请谅解 以后会多多改善！！！！