12.html5笔记6HTML5之fileReader、webs
2018-11-21 本文已影响0人
wudimingwo
image.png
image.png
<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>
image.png
image.png
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);
}
image.png
image.png
图片预览
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
image.png
html
<input type="file" name="file" id="file" value="" />
<div class="box">
<div class="bar"></div>
</div>
<span class="show"></span>
js
var pickFile = document.getElementById("file");
var reader = new FileReader();
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 + "%";
}
image.png
测试 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);
}
image.png
image.png
用处, 把文件拆分成多个, 可以开启多个传输,加快速度?
封装
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.reader[this.type](file);
this.bindEvent();
}
}
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");
}
})
}
image.png
image.png
image.png
HTML5 WebSocket 菜鸟教程
关键就是允许 服务器主动发送数据?
image.png
image.png
image.png
image.png
image.png
image.png
image.png
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
}
image.png
