input实现文件上传

2020-05-29  本文已影响0人  看到这朵小fa了么

通过input自身的type=file实现,需要注意的是input对于一个文件只能选择一次,所以如果要多次选中需要对input做处理

//html 
    <input id="file" oninput="handleFileChange(this)" type="file" name="file" multiple="multiple"></input>
// js
  handleFileChange = (e) => {
        const files = e.files;
        let uploadList = []
        if (files[0].size > 1024 * 1024 * 3) {
            return false; // 单张图片不得超过3M
        }
        for (let i = 0; i < files.length; i++) {
            if (window.FileReader) {
                // 创建文件可读流
                let reader = new FileReader()
                reader.onload = e => {
                    // let myimage = document.getElementById('img')
                    // 加载图片流展示到页面当中
                    createImg(e.target.result)
                    // 文件流base64格式
                    uploadList.push(e.target.result)
                }
                reader.readAsDataURL(files[i])
            }
        }
    }
  function createImg(imgSrc) {
        var theImg = document.createElement("img");
        theImg.src = imgSrc;
        document.body.appendChild(theImg);
        theImg.className = "imgC";
    }
上一篇下一篇

猜你喜欢

热点阅读