最近有个需求是把文件内容转成字符串展示出来，并且用户可以修改再上传到服务器。废话不多说，代码如下：
Blob读取：
// <!DOCTYPE html>
// <html lang="en">
// <head>
// <meta charset="UTF-8">
// <meta name="viewport" content="width=device-width, initial-scale=1.0">
// <meta http-equiv="X-UA-Compatible" content="ie=edge">
// <title>Document</title>
// </head>
// <body>
// <input type="file" id="myfile">
// <div id="output"></div>
// <script>
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
};
EventUtil.addHandler(document.getElementById('myfile'), "change", function (event) {
// console.log(event)
const fileList = event.target.files;
const reader = new FileReader();
reader.readAsText(fileList[0]);
reader.onload = function () {
// console.log(reader.result);
document.getElementById('output').append(reader.result);
}
reader.onprogress = function (event) {
console.log(event);
}
})
// </script>
// </body>
// </html>
String转Blob
const blob = new Blob(['Hello World'], { type: "text/plain" });
网友评论