- 1、去除input类型为file上传文件时默认样式和默认”选择文件”等;
- 2、压缩要上传的图片
- 3、隐藏上传按钮, 手动触发
实现思路
隐藏选择图片的input, 点击显示图片触发input的onchange事件
// xxx.html
<img id="pic" src="./images/xxx.png">
<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="file" accept="image/*" onchange="showPic(this)" style="visibility:hidden;position:absolute;top:0px;width:0px" />
<input type="button" value="upload" id="upload" style="visibility:hidden;position:absolute;top:0px;width:0px"/>
</form>
js代码
// 点击图片触发input的onchange事件
$('#pic').click(function() {
$('#file').click();
})
function showPic(source) {
var file = source.files[0];
if (window.FileReader) {
var fr = new FileReader();
fr.onloadend = function(e) {
// submit提交
$('#upload').click();
document.getElementById("pic").src = e.target.result;
// 压缩图片
// cutImageBase64(e.target.result, 300, 0.5);
};
fr.readAsDataURL(file);
}
}
压缩图片
cutImageBase64函数
function cutImageBase64(imgSrc,wid,quality) { //压缩上上传图片
var img = new Image();
img.src = imgSrc;
img.onload = function() {
var that = this;
//生成比例
var w = that.width,
h = that.height,
scale = w / h;
w = wid || w;
h = w / scale;
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
$(canvas).attr({ width: w, height: h });
ctx.drawImage(that, 0, 0, w, h);
// 生成base64
base64 = canvas.toDataURL('image/jpeg', quality || 0.6);
// $('#pic').attr('src',base64); // 显示压缩后的图片
};
}
动态更改form表单提交
var formData = new FormData(document.getElementById('registerForm'));
formData.append("name", '12222');
formData.append("file", convertBase64UrlToBlob(fileImg)); // fileImg是图片的base64字符串
base64图片转file文件提交
将剪切后的base64图片转成file文件提交,
/**
* 将以base64的图片url数据转换为Blob
* @param urlData
* 用url方式表示的base64图片数据
*/
function convertBase64UrlToBlob(urlData){
var bytes=window.atob(urlData.split(',')[1]); //去掉url的头,并转换为byte
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob( [ab] , {type : 'image/png'});
}