读取上传文件

前端读取上传文件

使用FileReader

读取txt文件

    <input id="file" type="file">
    <script>
        var input = document.getElementById("file");
        const readfile = function () {
            const file = this.files[0]
            console.log(file.size) //获取上传文件大小
            const reader = new FileReader()
            reader.onload = function (e) {
            console.log(e.target.result) //读取文本内容
            }
            reader.readAsText(file, 'GB2312') //这里别用utf-8，会出现中文乱码
        }
        input.addEventListener('change', readfile)

    </script>

读取图片

图片跟文本是一样的，当然了要获取它的宽高什么的还得改进一下

    <input id="file" type="file">
    <script>
        var input = document.getElementById("file");
        const readfile = function () {
            const file = this.files[0]
            console.log(file.size)
            const reader = new FileReader()
            reader.onload = function (e) {
                console.log(e.target.result) //图片的base64格式
                const image = new Image()
                image.src = e.target.result
                //图片只有加载出来才能显示宽高
                image.onload = function () {
                    console.log(`image.width:${image.width},image.height:${image.height},${image.size}`)
                }
                document.body.appendChild(image) //触发图片onload事件
            }
            reader.readAsDataURL(file) //这里使用readAsDataURL
        }
        input.addEventListener('change', readfile)
    </script>