如標題,之前在某個地方看到因為有Blob的存在,理論上可以在瀏覽器上查看所有格式的文件.自己想着試試現在暫時只能夠查看圖片和預覽txt文件.其他的比如doc,docx格式的文件查看的時候是亂碼
如圖:可以多選照片查看,可以查看txt文件
不說多了,主要是利用filereader讀取blob轉成base64或者直接讀取文本然后展示.代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="file" id="file1" multiple="multiple">
<div id="showArea" style="width: 500px;height: 500px;border: #0066CC 1px solid;">
</div>
<textarea rows="30" cols="80" id="textarea">
</textarea>
</body>
<script type="text/javascript">
/* ArrayBuffer, Blob對象(二進制文件) 和 字符串, base64(ASCII碼) 之間的相互轉換/單向轉換, */
// 文件讀取器 FileReader
// FileReader 只接受 File 或 Blob 類型的數據(事實上 File 也 Blob 的一種)
// 1.Blob類型
const filereader = new FileReader();
const blob = new Blob(['hello file-reader'], { type: 'text/plain'});
filereader.onload = e => {
console.log(e.target.result); // 輸出 data:text/plain;base64,aGVsbG8gZmlsZS1yZWFkZXI=
var txt = new File();
}
// filereader.readAsDataURL(blob);
// 2. File類型
let file1DOM = document.querySelector('#file1');
file1DOM.onchange = function(){
console.log(this.files)
let file1 = this.value
var fileReaders = []
for(var i = 0;i<this.files.length;i++){
console.log(this.files[i].type)
fileReaders[i] = new FileReader();
var fileType = this.files[i].type.split('/')[0]
if(fileType == 'image'){
fileReaders[i].readAsDataURL(this.files[i])
fileReaders[i].onload = function(e) {
var image = new Image();
image.setAttribute('src',e.target.result)
image.setAttribute('width',200)
image.onload = function() {
document.querySelector('#showArea').appendChild(this)
}
}
} else if(fileType == 'text'){
fileReaders[i].readAsText(this.files[i])
fileReaders[i].onload = function(e){
document.querySelector('#textarea').value = e.target.result
}
}
}
}
</script>
</html>
試過利用filereader的readastext()讀取docx,但是讀取出來格式是application/vnd.openxmlformats-officedocument.wordprocessingml.document,讀取出來也是亂碼.大概是編碼問題.試了試別的編碼方式GB2312,GBK沒有用,都是亂碼.先放放,有空了再看看