fileReader读取文件
- fileReader方法:
- abort() 终止读取
- readAsBinaryString(file) 将文件读取为二进制编码
- readAsDataURL(file) 将文件读取为DataURL编码base64
- readAsText(file, [encoding]) 将文件读取为文本
- readAsArrayBuffer(file) 将文件读取为arraybuffer 通过不同的方式读取文件
- fileReader读取文件事件:
- onloadstart 读取开始时触发
- onprogress 读取中
- onloadend 读取完成触发，无论成功或失败
- onload 文件读取成功完成时触发
- onabort 中断时触发
- onerror 出错时触发
- file分割文件方法slice File.slice(起始字节，终止字节)
<body>
<input type="file" id="file" >
<script>
var reader = new FileReader();
var input = document.getElementById("file");
input.onchange = function (e) {
console.log(input.files) // 打印结果如下所示
}
</script>
</body>
input标签有个files属性 存的是当前的文件列表FileList数据
FileList是文件类数组对象 当前只有一个文件 如果上传多个文件 可以使用
<input type="file" id="file" multiple> 那么FileList里面就不止一个File对象了
FileList {0: File, length: 1}
0: File
lastModified: 1650612334403
lastModifiedDate: Fri Apr 22 2022 15:25:34 GMT+0800 (中国标准时间) {}
name: "m.jpg"
size: 29413
type: "image/jpeg"
webkitRelativePath: ""
[[Prototype]]: File
length: 1
var reader = new FileReader();
var input = document.getElementById("file");
input.onchange = function (e) {
// console.log(input.files)
reader.readAsDataURL(input.files[0]);
}
reader.onloadstart = function (e) {
// this指向FileReader对象
// console.log(this === reader) //true
// console.log(this === e.target,this) // true FileReader {readyState: 1, result: null, error: null, onloadstart: ƒ, onprogress: ƒ, …}
console.log("start")
}
reader.onprogress = function (e) {
console.log("progress")
}
reader.onload = function (e) {
console.log("onload")
}
reader.onloadend = function (e) {
console.log("onloadend")
}
reader.onerror = function (e) {
console.log("error");
}
websocket
-
Websocket是一种网络协议，是在HTTP基础上做了一些些优化的协议，与HTTP无直接关系。
-
HTTP（超文本传输协议）：规定了web浏览器如何从web服务器获取文档和向web服务器提交表单内容，以及web服务器如何响应这些请求和提交返回给浏览器。规定传输格式的 HTTP的第一个版本叫做 HTTP/0.9,是一种为互联网原始数据传输服务的简单协议。由RFC 1945[6]定义的HTTP/1.0进一 步完善了这个协议。它允许消息以类 MIME消息的格式传送，它包括传输数据的元信息和对请 求/响应语义的修饰。HTTP/1.0没有充分考虑到分层代理，缓存的，以及持久连接和虚拟 主机的需求的影响。 HTTP/1.1，版本对1.0版本做了优化，开始支持长连接和缓存 HTTP/2.0
-
为什么需要webSocket? 因为 HTTP 协议有一个缺陷：通信只能由客户端发起 服务器端不能实时发送最新数据给客户端，
websocket请求报文
websocket响应报文
- 报文头字段含义
- Connection 必须设置 Upgrade，表示客户端希望连接升级。
- Upgrade 字段必须设置 Websocket，表示希望升级到 Websocket 协议。
- Sec-WebSocket-Key 是随机的字符串，服务器端会用这些数据来构造出一个 SHA-1 的信息摘要。把 “Sec-WebSocket-Key” 加上一个特殊字符串 “258EAFA5-E914-47DA-95CA-C5AB0DC85B11”，然后计算 SHA-1 摘要，之后进行 BASE-64 编码，将结果做为 “Sec-WebSocket-Accept” 头的值，返回给客户端。如此操作，可以尽量避免普通 HTTP 请求被误认为 Websocket 协议。
- Sec-WebSocket-Version 表示支持的 Websocket 版本。RFC6455 要求使用的版本是 13，之前草案的版本均应当弃用。
- Sec-WebSocket-Protocal是一个用户定义的字符串，用来区分同URL下，不同的服务所需要的协议。
- Origin 字段是可选的，通常用来表示在浏览器中发起此 Websocket 连接所在的页面，类似于 Referer。但是，与 Referer 不同的是，Origin 只包含了协议和主机名称。 其他一些定义在 HTTP 协议中的字段，如 Cookie 等，也可以在 Websocket 中使用。
- Websocket特点 （1）建立在 TCP 协议之上，服务器端的实现比较容易。 （2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。 （3）数据格式比较轻量，性能开销小，通信高效。 （4）可以发送文本，也可以发送二进制数据。 （5）没有同源限制，客户端可以与任意服务器通信。 （6）协议标识符为ws（如果加密为wss）服务器网址就是url （7）不受同源策略的限制 优点: 客户端与服务器都可以主动传送数据给对方; 不用频率创建TCP请求及销毁请求，减少网络带宽资源的占用，同时也节省服务器资源;
使用websocket
var Socket = new WebSocket(url);
Websocket方法： 1、Socket.send() send(data) 方法使用连接传输数据。
2、Socket.close() close() 方法用于终止任何现有连接
websocket属性
websocket事件
websocket使用
