通过隐藏上传按钮，图片覆盖按钮，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);

}

})

原著是一个有趣的人,若有侵权,请通知删除