js文件上传fileupload（html/javascript实现简单的上传）
一 、 上传用到的按钮类型是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>创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！