最近被项目搞得焦头烂额，虽然学了很多知识但是没时间一一记录了，有时间的话再补上吧~
在app中我们经常可以看到未连接网络时会出现这种图片
其实就是根据网络状态来控制图片是否显示 代码如下：
let box = document.querySelectorAll('div')[0];
window.addEventListener('online',()=>{
box.style.display = 'none';
});
window.addEventListener('offline',()=>{
box.style.display = 'flex';
box.innerText = '网络连接已断开';
})
H5中新增了online 和 offline 分别用于检测 网络是否连接 。
效果如图：
当网络正常时 盒子会被隐藏 , 当网络连接断开时 盒子显示(这么丑的样子我都不好意思说自己是设计师…)
在谷歌浏览器F12控制台中 选择network 后可以根据需求选择不同的网络状态来模拟网络,offline用来模拟断网的情况
然后就是读取文件
1.读取文件、
读取文件分为三步
- 初始化reader对象
- 读取 this.files[0] 文件里面的内容， 当这个文件的内容读取完毕之后，会把内容存放到result里面
- 把读取的内容显示到页面中
代码如下：
<input type="file" >
<p></p>
let input = document.querySelectorAll('input')[0];
let p = document.querySelectorAll('p')[0];
//1.第一步 当input内容发生改变
input.addEventListener('change',function () {
//2.创建一个新的函数reader
let reader = new FileReader();
//3.每个文件可能会有多个几何 当前文件只有一个 所以取下标0
reader.readAsText(this.files[0]);
//4.当文件加载完毕后获取result 来修改需要的文件
reader.addEventListener('load',function () {
p.innerText = this.result
})
})
其实我这里也有一点懵逼。。。 一是如果在第二步后面打印reader的话。。效果如下面的图一，但其实结果按照道理来说是图二的样子才对，因为执行到第二步的时候三四步还没有执行 所以result不应有值。。。但不知道为什么只有删除三四步的时候效果才为图二，非常奇怪 第二点就是如果读取文件是中文的话会造成乱码 应该是编译方式的问题。。但是浏览器和编辑器都是utf-8还是会出现问题 不知道是不是编辑器自带的后台系统搞得鬼。。。等学到后台再来研究吧
总结来说就是当input被修改后发生三步 ：
1.创建 2.读取 3.修改
然后第二步就是读取图片其实和上面的方法一样
<input type="file" >
<img src="" alt="">
<script>
let input = document.querySelectorAll('input')[0];
let img = document.querySelectorAll('img')[0];
//1.第一步 当input内容发生改变
input.addEventListener('change',function () {
//1.创建
let reader = new FileReader();
//2.读取
reader.readAsDataURL(this.files[0]);
//3.修改
reader.addEventListener('load',function () {
img.setAttribute('src',this.result)
})
})
</script>
只是第四步中会有一点小区别， 图片上传到服务器中 其实是使用bese64 来表示二进制流，然后下载时也是下载这个bese64 会自动转码解析成图片，所以代码方面几乎和读取文件没有任何区别，至于是怎么实现转码的以我的水平这个暂时不用我这种小白关心吧 - -。。