js实现file上传图片在div中显示与点击div触发file表单

解决file文件document.querySelector('input[type=“file”]).value=“C:\fakepath”

代码示例：

<div class="headPortrait">
     <div>请选择头像</div>  
     <input type="file" hidden name="image">
 </div>

(function() {
    const div = document.getElementsByClassName('headPortrait')[0];
    const file = document.querySelector('input[type="file"]');
    function fn() {
        file.oninput = function(){
            if(file.files && file.files[0]) {
                //  读取文件对象
                let reader = new FileReader();
                reader.onload = function(evt) {
                    let src = evt.target.result;
                    const img = document.createElement('img');
                    div.appendChild(img);
                    img.src = src;
                }
                // 将文件读取为 DataURL
                reader.readAsDataURL(file.files[0]);
            }
        }
    }
    div.addEventListener('click', function (e) {
        // file模拟input点击事件
        var evt = new MouseEvent("click", {
            bubbles: false,
            cancelable: true,
            view: window,
        });
        file.dispatchEvent(evt,fn());
    }, false);
})()