H5练习学习——网络状态,文件读取，图片读取

最近被项目搞得焦头烂额，虽然学了很多知识但是没时间一一记录了，有时间的话再补上吧~

在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.读取文件、

读取文件分为三步

1. 初始化reader对象
2. 读取 this.files[0] 文件里面的内容， 当这个文件的内容读取完毕之后，会把内容存放到result里面
3. 把读取的内容显示到页面中
   代码如下：

<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 会自动转码解析成图片，所以代码方面几乎和读取文件没有任何区别，至于是怎么实现转码的以我的水平这个暂时不用我这种小白关心吧 - -。。