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标签
 <input type="file" id="btn_file3" name="consignerRdFile" accept="image/jpg,image/jpeg,image/gif,image/png"
                   style="display:none"
                   onchange="imgChange(event,'consignerRdSign')">
<img id="consignerRdSign" src="/static/images/upload_img.png" width="100px" height="100px"
                 onclick="F_Open_dialog('btn_file3')">