图片点击触发input-file点击
function F_Open_dialog(id) {
document.getElementById(id).click();
}
处理event事件,给image赋值base64的src
function imgChange(e, imageid) {
console.info(e.target.files[0]);//图片文件
console.log(e.target.value);//这个也是文件的路径和上面的dom.value是一样的
var reader = new FileReader();
reader.onload = (function (file) {
return function (e) {
console.info(this.result); //这个就是base64的数据了
document.getElementById(imageid).src = this.result;
};
})(e.target.files[0]);
reader.readAsDataURL(e.target.files[0]);
}
body中需要加上隐藏的input-file和img标签
<input type="file" id="btn_file3" name="consignerRdFile" accept="image/jpg,image/jpeg,image/gif,image/png"
style="display:none"
οnchange="imgChange(event,'consignerRdSign')">
<img id="consignerRdSign" src="/static/images/upload_img.png" width="100px" height="100px"
οnclick="F_Open_dialog('btn_file3')">
function F_Open_dialog(id) {
document.getElementById(id).click();
}
处理event事件,给image赋值base64的src
function imgChange(e, imageid) {
console.info(e.target.files[0]);//图片文件
console.log(e.target.value);//这个也是文件的路径和上面的dom.value是一样的
var reader = new FileReader();
reader.onload = (function (file) {
return function (e) {
console.info(this.result); //这个就是base64的数据了
document.getElementById(imageid).src = this.result;
};
})(e.target.files[0]);
reader.readAsDataURL(e.target.files[0]);
}
body中需要加上隐藏的input-file和img标签
<input type="file" id="btn_file3" name="consignerRdFile" accept="image/jpg,image/jpeg,image/gif,image/png"
style="display:none"
οnchange="imgChange(event,'consignerRdSign')">
<img id="consignerRdSign" src="/static/images/upload_img.png" width="100px" height="100px"
οnclick="F_Open_dialog('btn_file3')">