html/javascript实现简单的上传

news2025/1/21 21:53:19

一、上传用到的按钮类型是type = file

二、为了美化上传按钮，我们通常会自定义按钮，将默认的上传隐藏掉。

fileInputs.click() 触发上传按钮点击

三、 new FileReader()

读取文件内容方法：
readAsText() 读取文本文件，(可以使用Txt打开的文件)
readAsBinaryString(): 读取任意类型的文件，返回二进制字符串
readAsDataURL(): 方法可以将读取到的文件编码成DataURL ，可以将资料(例如图片、excel文件)内嵌在网页之中，不用放到外部文件
abort: 中断读取

文件的状态的获取：(根据自身情况使用)

onabort:读取文件断片时触发
onerror:读取文件错误时触发
onload:文件读取成功时触发（这里我就简单的用了onload）
onloadend:文件读取完毕之后，不管成功还是失败触发
onloadstart: 开始读取文件时触发
onprogress:读取文件过程中触发

为了更直观的看到区别，我为大家截取了reader上传前后的数据。(如下图)

reader对象上传前的数据：

上传后通过readAsDataURL处理后的数据：

四、 file文件

const fileInputs = document.querySelector('.fileDoms')

console.log("file文件",fileInputs.files)

五、完整的代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传</title>
</head>
<body>
    <div class="upload">
        <img src="" alt="" style="width: 200px;height:200px;background:red;">
        <button>点击上传</button>
        <input type="file" style="display:none" class="fileDoms" onchange="changeFile()"/>
    </div>
</body>
<script>
    let btn  = document.querySelector(".upload button")
    let img = document.querySelector(".upload img")
    const fileInputs = document.querySelector('.fileDoms')
    btn.onclick = btnclick
    function btnclick(){
        fileInputs.click()
    }
    function changeFile(){
        console.log("上传")
        let reader = new FileReader();
        reader.readAsDataURL(fileInputs.files[0]);
        reader.onload = function(a){
            img.src = a.target.result; //等同于reader.result
            console.log(a,reader,reader.result);  
        }
    }
    </script>
</html>