通过隐藏上传按钮,图片覆盖按钮,jq改变图片途径达到上传效果
html部分
<input type="file" id="business_license" name="business_license" class="fileinp" style="display:none;" onchange="filechange(event)">
<img src="${PATH}/res/images/jion_img_upload@2x.png" width="55px" height="55px" class="img-change">
jq部分
$(".img-change").click(function() {
$("#business_license").click();
})
$("input[type='file']").change(function(event) {
console.log(event)
var files = event.target.files,
file;
if (files && files.length > 0) {
// 获取目前上传的文件
file = files[0]; // 文件大小校验的动作
if (file.size > 1024 * 1024 * 2) {
alert('图片大小不能超过 2MB!');
return false;
}
// 获取 window 的 URL 工具
var URL = window.URL || window.webkitURL;
// 通过 file 生成目标 url
var imgURL = URL.createObjectURL(file);
//用attr将img的src属性改成获得的url
$(this).next('img').attr("src", imgURL);
$(this).next('span').attr("src", imgURL);
// 使用下面这句可以在内存中释放对此 url 的伺服,跑了之后那个 URL 就无效了
// URL.revokeObjectURL(imgURL);
}
})