通過(guò)隱藏上傳按鈕哆料,圖片覆蓋按鈕爵川,jq改變圖片途徑達(dá)到上傳效果
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]; // 文件大小校驗(yàn)的動(dòng)作
if (file.size > 1024 * 1024 * 2) {
alert('圖片大小不能超過(guò) 2MB!');
return false;
}
// 獲取 window 的 URL 工具
var URL = window.URL || window.webkitURL;
// 通過(guò) file 生成目標(biāo) url
var imgURL = URL.createObjectURL(file);
//用attr將img的src屬性改成獲得的url
$(this).next('img').attr("src", imgURL);
$(this).next('span').attr("src", imgURL);
// 使用下面這句可以在內(nèi)存中釋放對(duì)此 url 的伺服,跑了之后那個(gè) URL 就無(wú)效了
// URL.revokeObjectURL(imgURL);
}
})