1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
<input type="file" name="file" id="file" value="" />
<script type="text/javascript">
var pickFile = document.getElementById("file");
// 创建读取文件的实例
var reader = new FileReader();
pickFile.onchange = function (e) {
console.log(this.files);
// 获取文件的对象
}
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
pickFile.onchange = function (e) {
console.log(this.files);
reader.readAsDataURL(this.files[0]);
// 获取文件的对象
}
reader.onloadstart = function (e) {
console.log("loadstart",e);
}
reader.onprogress = function (e) {
console.log("progress",e);
}
reader.onload = function (e) {
console.log("load",e);
}
reader.onloadend = function (e) {
console.log("loadend",e);
}
reader.onabort = function (e) {
console.log("abort",e);
}
reader.onerror = function (e) {
console.log("error",e);
}
图片预览
reader.onload = function (e) { console.log("load",e); // this == e.target 返回 true; var img = new Image(); img.src = this.result; document.body.appendChild(img); }下载进度条 根据 onprogress
``` html <div class="box"> <div class="bar"></div> </div> js var pickFile = document.getElementById(“file”); var reader = new FileReader();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var bar = document.getElementsByClassName('bar')[0];
var show = document.getElementsByClassName('show')[0];
pickFile.onchange = function (e) {
console.log(this.files);
reader.readAsDataURL(this.files[0]);
}
reader.onprogress = function (e) {
var percent = e.loaded / e.total * 100
console.log(percent);
show.innerText = percent + "%";
bar.style.width = percent + "%";
} ```  > 测试 abort ```
<input type="file" name="file" id="file" value="" />
<button onclick="abort()">stop</button>
<script type="text/javascript">
var pickFile = document.getElementById("file");
var reader = new FileReader();
pickFile.onchange = function (e) {
console.log(this.files);
reader.readAsDataURL(this.files[0]);
}
function abort () {
reader.abort();
}
reader.onabort = function (e) {
console.log("abort",e);
} ```   > 用处, 把文件拆分成多个, 可以开启多个传输,加快速度?
封装 ``` function PartFileReader (files,type,event) { // 要处理的文件 this.files = files; // 以什么编码格式 读取 this.type = type; // 用户选择的监听事件类型, 以及回调函数, 这个结构感觉很巧妙 this.event = event; // 以什么单位截取 this.step = 1024 * 1024; // 加载了多少 this.loaded = 0; // 文件总大小 this.total = this.files.size; // 创建一个 读取器实例 this.reader = new FileReader(); // 读取的起点位置. this.readPartFile(0); // abort 接口 this.abort = this.reader.abort; } PartFileReader.prototype.readPartFile = function (start) { if (this.files.slice) { // 可以看出, slice 文件拆分不是 reader 上的方法, 而是文件 本身的方法. var file = this.files.slice(start,this.step + start); // 根据传进来的读取文件的方式进行读取. this.readerthis.type; this.bindEvent(); } }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
PartFileReader.prototype.bindEvent = function () {
var self = this;
self.reader.onloadstart = function (e) {
self.event.loadstart && self.event.loadstart.call(this,e);
}
self.reader.onprogress = function (e) {
self.event.progress && self.event.progress.call(this,e);
}
self.reader.onload = function (e) {
self.loaded += e.loaded;
self.event.load && self.event.load.call(this,e);
console.log(self.loaded,self.total);
if (self.loaded < self.total) {
// 这个地方很关键,
self.readPartFile(self.loaded);
}
}
self.reader.onloadend = function (e) {
self.event.loadend && self.event.loadend.call(this,e);
}
self.reader.onerror = function (e) {
self.event.error && self.event.error.call(this,e);
}
self.reader.onabort = function (e) {
self.event.abort && self.event.abort.call(this,e);
}
} ``` > 调用时的参数. ``` pickFile.onchange = function (e) {
console.log(this.files);
var reader = new PartFileReader(this.files[0],'readAsDataURL',{
load : function (e) {
console.log("load");
},
error : function (e) {
console.log("error");
},
loadend : function (e) {
console.log("loadend");
},
loadstart : function (e) {
console.log("loadstart");
},
abort : function (e) {
console.log("abort");
},
progress : function (e) {
console.log("progress");
}
})
} ```
HTML5 WebSocket 菜鸟教程 关键就是允许 服务器主动发送数据?
var websocket = new WebSocket("ws://echo.websocket.org/"); console.log(websocket.readyState);//0 websocket.onopen = function(e) { websocket.send("hello everything"); console.log(websocket.readyState);//1 } websocket.onmessage = function(e) { console.log(e); console.log(e.data); console.log(websocket.readyState);//1 websocket.close(); console.log(websocket.readyState);//2 } websocket.onclose = function(e) { console.log(websocket.readyState);//3 }
