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')">