美文网首页
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";
    }

相关文章

  • vue实现文件上传

    本文主要介绍input标签实现的文件上传 input 标签上传也有两种写法 一、隐藏input标签 将input标...

  • 图片上传案例

    demo js 实现 input type="file" 文件上传示例代码

  • upload

    多文件上传并预览 利用input 的type='file" 可以实现文件的上传,不过只支持单个文件上传。只有给in...

  • vue原生文件上传,可以多文件上传

    1.单文件上传 2.多文件上传 在input上加属性multiple="multiple"即可实现多文件上传,也可...

  • input实现文件上传

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

  • input[file]标签点击选择文件响应很慢的解决办法

    input[file]标签的accept属性可用于指定上传文件的MIME类型。例如,想要实现默认上传图片文件的代码...

  • hadoop开发应用

    hadoop开发应用 一、文件上传 创建input文件夹# hadoop fs -mkdir /input 上传...

  • 图片上传和预览

    通过input:file来实现图片预览和上传的功能 input:file accept属性,表示接受的文件类型,默...

  • input

    input file - 文件上传

  • 前端实现图片上传预览转换base64

    前端实现文件的上传,就必须用到input标签,type属性为file。在vue项目中通ref操作dom。input...

网友评论

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

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