html 点击选择本地文件(图片)显示和上传

图片点击触发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标签
                     style="display:none"
                   οnchange="imgChange(event,'consignerRdSign')">
                 οnclick="F_Open_dialog('btn_file3')">

你可能感兴趣的:(html选择本地图片显示,html图片转base64,Java,web)