美文网首页让前端飞Web前端之路前端日常进阶
input file 上传按钮,jq上传图片

input file 上传按钮,jq上传图片

作者: 吴乐要奋斗 | 来源:发表于2019-08-13 15:26 被阅读0次

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

}

})

相关文章

网友评论

    本文标题:input file 上传按钮,jq上传图片

    本文链接:https://www.haomeiwen.com/subject/coqbjctx.html