美文网首页
input实现文件上传

input实现文件上传

作者: 看到这朵小fa了么 | 来源:发表于2020-05-29 16:17 被阅读0次

    通过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";
        }
    

    相关文章

      网友评论

          本文标题:input实现文件上传

          本文链接:https://www.haomeiwen.com/subject/mfqfzhtx.html