网站增加外链方法,网页设计实训内容及过程,中国传统文化网站设计素材,昆山制造网站的地方1.Blob实现下载文件 我们可以通过window.URL.createObjectURL#xff0c;接收一个Blob#xff08;File#xff09;对象#xff0c;将其转化为Blob URL,然后赋给 a.download属性#xff0c;然后在页面上点击这个链接就可以实现下载了
!-- html部分 --
a id接收一个BlobFile对象将其转化为Blob URL,然后赋给 a.download属性然后在页面上点击这个链接就可以实现下载了
!-- html部分 --
a idh点此进行下载/a
!-- js部分 --
scriptvar blob new Blob([Hello World]);var url window.URL.createObjectURL(blob);var a document.getElementById(h);a.download helloworld.txt;a.href url;
/script 2.Blob实现图片本地显示
!-- html部分 --
input typefile idf /
img idimg stylewidth: 200px;height:200px; /
!-- js部分 --
scriptdocument.getElementById(f).addEventListener(change, function (e) {var file this.files[0];const img document.getElementById(img);const url window.URL.createObjectURL(file);img.src url;img.onload function () {// 释放一个之前通过调用 URL.createObjectURL创建的 URL 对象window.URL.revokeObjectURL(url);}}, false);
/script3.Blob实现文件分片上传 通过Blob.slice(start,end)可以分割大Blob为多个小Blob xhr.send是可以直接发送Blob对象的
!-- html部分 --
input typefile idf /
!-- js部分 --
script
function upload(blob) {var xhr new XMLHttpRequest();xhr.open(POST, /ajax, true);xhr.setRequestHeader(Content-Type, text/plain)xhr.send(blob);
}document.getElementById(f).addEventListener(change, function (e) {var blob this.files[0];const CHUNK_SIZE 20; .const SIZE blob.size;var start 0;var end CHUNK_SIZE;while (start SIZE) {upload(blob.slice(start, end));start end;end start CHUNK_SIZE;}
}, false);
/scriptNode端(Koa)
app.use(async (ctx, next) {await next();if (ctx.path /ajax) {const req ctx.req;const body await parse(req);ctx.status 200;console.log(body);console.log(---------------);}
});4.Blob本地读取文件内容 如果想要读取Blob或者文件对象并转化为其他格式的数据可以借助FileReader对象的API进行操作 FileReader.readAsText(Blob)将Blob转化为文本字符串 FileReader.readAsArrayBuffer(Blob) 将Blob转为ArrayBuffer格式数据 FileReader.readAsDataURL(): 将Blob转化为Base64格式的Data URL 下面我们尝试把一个文件的内容通过字符串的方式读取出来
input typefile idf /
scriptdocument.getElementById(f).addEventListener(change, function (e) {var file this.files[0];const reader new FileReader();reader.onload function () {const content reader.result;console.log(content);}reader.readAsText(file);}, false);
/script1.通过ArrayBuffer的格式读取本地数据
document.getElementById(f).addEventListener(change, function (e) {const file this.files[0];const fileReader new FileReader();fileReader.onload function () {const result fileReader.result;console.log(result)}fileReader.readAsArrayBuffer(file);
}, false);2.通过ArrayBuffer的格式读取Ajax请求数据 通过xhr.responseType “arraybuffer” 指定响应的数据类型 在onload回调里打印xhr.response 前端
const xhr new XMLHttpRequest();
xhr.open(GET, ajax, true);
xhr.responseType arraybuffer;
xhr.onload function () {console.log(xhr.response)
}
xhr.send();Node端
const app new Koa();
app.use(async (ctx) {if (pathname /ajax) {ctx.body hello world;ctx.status 200;}
}).listen(3000)3.通过TypeArray对ArrayBuffer进行写操作
const typedArray1 new Int8Array(8);
typedArray1[0] 32;const typedArray2 new Int8Array(typedArray1);
typedArray2[1] 42;console.log(typedArray1);
// output: Int8Array [32, 0, 0, 0, 0, 0, 0, 0]console.log(typedArray2);
// output: Int8Array [32, 42, 0, 0, 0, 0, 0, 0]4.通过DataView对ArrayBuffer进行写操作
const buffer new ArrayBuffer(16);
const view new DataView(buffer);
view.setInt8(2, 42);
console.log(view.getInt8(2));
// 输出: 421.Buffer是Node.js提供的对象前端没有。 它一般应用于IO操作例如接收前端请求数据时候可以通过以下的Buffer的API对接收到的前端数据进行整合 例子如下
// Node端Koa
const app new Koa();
app.use(async (ctx, next) {if (ctx.path /ajax) {const chunks [];const req ctx.req;req.on(data, buf {chunks.push(buf);})req.on(end, () {let buffer Buffer.concat(chunks);console.log(buffer.toString())})}
});
app.listen(3000)// 前端
const xhr new XMLHttpRequest();
xhr.open(POST, ajax, true);
xhr.setRequestHeader(Content-Type, text/plain)
xhr.send(asdasdsadfsdfsadasdas);运行结果
// Node端输出
asdasdsadfsdfsadasdas转载地址https://zhuanlan.zhihu.com/p/97768916
