h5fileReader 图片上传
<!-- src 指定路径（资源定位 --就是url） 外部文件，一般来说服务器资源 意味着他需要向服务器发送请求 会占用资源 -->
<!-- <img src="../img/2.jpg" alt=""> -->
<body>
<!--
FileReader:读取文件内容
方法：1。readAsText():读取文本文件（可以使用Txt打开的文件），返回字符串 默认编码是utf-8
2. readAsBinaryStting() 任意文件 作用是存取文件 获取二进制文件 传递给后台
3. readAsDataUrl() 获取一段以data开头的字符串 本质就是dataURL dataUrl是一种将将文件（一般就是图像或者能够嵌入到文档格式）传入到文档的方案 DataUrl 将资源转化成base64字符串形式 直接将这些内容直接存储在URL中 优化网站加载速度
abort()中断读取
-->
<!--作用： 及时预览
及时 onchang
预览 readAsDataUrl
-->
文件： <input type="file" name="myFile" id="myFile" onchange = 'getImg()' >
<img src="" alt="">
<script>
function getImg (){
// 创建文件读取对象
var reader = new FileReader()
// 读取文件
/*
没有返回值 void 存储在返回对象result属性中
传递一个参数 blod 二进制大问价（图片或者其他嵌入到文档）
文件存储在当前对象 files中
*/
var file = document.querySelector('#myFile').files[0];
reader.readAsDataURL(file)
// 获取数据
// 判读有没有读完fileReader提供一个完整的事件模型 用来捕获状态
// onabort:
// onload:读取完成触发
reader.onload = function () {
console.log(reader.result)
document.querySelector('img').src = reader.result
}
console.log(reader.result)
}
</script>
浙公网安备 33010602011771号