这个过于简单就不放代码了，具体思路是把一个a标签放上背景图片，把上传文件 input type="file" 大小设置成a标签一样大，并且放置到a标签上面，opacity设置成0透明的。点击a实际上是点击了 input type="file"

2.选取文件后生成缩略图，这个基本思路是监听 input type="file" 的onchange事件，如果选了文件就利用FileReader生成一个图片data:url添加到div.preview里面动态生成的img上，给div.preview设置成flex布局就可以灵活放置预览图了。

html

<div class="wrap"> 

 

        <a href="" class="selectImg" title="上传图片"></a> 

        <input type="file" multiple id="file"> 

        <input type="button" value="上传" id="upload"> 

        <div class="preview"></div> 

        <div class="progress"> 

            <progress max="100" value="1" item-width="100" id="progress"></progress> 

        </div> 

    </div> 

js

fileinput.onchange = () => { 

            //console.log('dddd') 

            var files = fileinput.files 

            let imgDOMArray = new Array(files.length) 

            let reader = [] 

            let thumbPic = [] 

            progressDOM = document.getElementById('progress-img') 

            for (let i = 0; i < files.length; i++) { 

                reader[i] = new FileReader() 

                thumbPic[i] = document.createElement('div') 

                imgDOMArray[i] = document.createElement('img') 

                imgDOMArray[i].file = files[i] 

                thumbPic[i].className = 'thumbPic' 

                thumbPic[i].appendChild(imgDOMArray[i]) 

                previewDOM.appendChild(thumbPic[i]) 

                reader[i].readAsDataURL(files[i]) 

                reader[i].onload = (img => { 

 

(责任编辑：admin)