前端代码 :
$("#input_file").change(function(){
var files = this.files;
var file=files[0];
if (parseInt(file.size / 1024) > 6000) {
alert("图片大小超过6M,请重新上传")
}else{
layer.load(0);
photoCompress(file,{
quality: 0.2
},function (base64Codes) {
var bl = convertBase64UrlToBlob(base64Codes);
formdata.set('file',bl);
//上传
UpImgFile()
})
}
});
/**
* @param file: 上传的图片
* @param objCompressed:压缩后的图片规格
* @param objDiv:容器或回调函数
*/
function photoCompress(file, objCompressed, objDiv){
var ready=new FileReader();
ready.readAsDataURL(file);
ready.onload=function(){
var fileResult=this.result;
canvasDataURL(fileResult,objCompressed,objDiv)
}
}
function canvasDataURL(path, objCompressed, callback) {
var img = new Image();
img.src = path;
img.onload = function () {
var that = this;
//默认压缩后图片规格
var quality = 0.5;
var w = that.width;
var h = that.height;
var scale = w / h;
//实际要求
w = objCompressed.width || w;
h = objCompressed.height || (w / scale);
if(objCompressed.quality && objCompressed.quality > 0 && objCompressed.quality <= 1){
quality = objCompressed.quality;
}
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(that, 0, 0, w, h);
var base64 = canvas.toDataURL('image/jpeg', quality);
// 回调函数返回base64的值
callback(base64);
}
}
function convertBase64UrlToBlob(urlData) {
var arr = urlData.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 Blob([u8arr], {type:mime});
}
function UpImgFile() {
$.ajax({
url: '${ctx}/user/upload',
type: 'POST',
cache: false, //上传文件不需要缓存
data: formdata,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success: function (data) {
console.log(data);
if(data=="error"){
layer.msg('上传失败!');
}else {
var strs= data;
$("#code").val(strs5);
}
},
error: function (data) {
layer.msg('图片上传失败!请重新选择!',{time: 20000,icon: 6});
layer.closeAll();
}
});
layer.closeAll();
}
后端:
@RequestMapping("upload")
public void uploadImg(HttpServletResponse response,@RequestParam("file") CommonsMultipartFile file) throws IOException {
String path="e:static/img/";
String name = RandomStringUtils.randomAlphanumeric(15)+".jpg";
byte[] imgs = file.getBytes();;
FileImageOutputStream outputStream =newFileImageOutputStream(newFile(path+"/"+name));
outputStream.write(imgs,0,imgs.length);
outputStream.close();
response.getWriter().print(name);
}