Forked from Arguseye/FileReader-image-preview.html
Created
December 17, 2023 08:54
-
-
Save neichen/9e12c8a643cd0a77c8323abc350a5efe to your computer and use it in GitHub Desktop.
FileReader 解析Excel文件
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> | |
<title>Image preview example</title> | |
<script type="text/javascript"> | |
oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; | |
oFReader.onload = function (oFREvent) { | |
document.getElementById("uploadPreview").src = oFREvent.target.result; | |
}; | |
function loadImageFile() { | |
if (document.getElementById("uploadImage").files.length === 0) { return; } | |
var oFile = document.getElementById("uploadImage").files[0]; | |
if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; } | |
oFReader.readAsDataURL(oFile); | |
} | |
</script> | |
</head> | |
<body onload="loadImageFile();"> | |
<form name="uploadForm"> | |
<table> | |
<tbody> | |
<tr> | |
<td><img id="uploadPreview" style="width: 100px; height: 100px;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E" alt="Image preview" /></td> | |
<td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td> | |
</tr> | |
</tbody> | |
</table> | |
<p><input type="submit" value="Send" /></p> | |
</form> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title>FileReader 解析Excel文件</title> | |
<!-- https://github.com/SheetJS/js-xlsx --> | |
<script src="./js/xlsx.full.min.js"></script> | |
</head> | |
<body> | |
<input type="file"onchange="importf(this)" /> | |
<div id="demo"></div> | |
<script> | |
/* | |
FileReader共有4种读取方法: | |
1.readAsArrayBuffer(file):将文件读取为ArrayBuffer。 | |
2.readAsBinaryString(file):将文件读取为二进制字符串 | |
3.readAsDataURL(file):将文件读取为Data URL,实现图片预览 | |
4.readAsText(file, [encoding]):将文件读取为文本,encoding缺省值为'UTF-8' | |
*/ | |
var wb;//读取完成的数据 | |
var rABS = false; //是否将文件读取为二进制字符串 | |
function importf(obj) {//导入 | |
if(!obj.files) { | |
return; | |
} | |
var f = obj.files[0]; | |
var reader = new FileReader(); | |
var start = new Date(); | |
reader.onload = function(e) { | |
var data = e.target.result; | |
if(rABS) { | |
wb = XLSX.read(btoa(fixdata(data)), {//手动转化 | |
type: 'base64' | |
}); | |
} else { | |
wb = XLSX.read(data, { | |
type: 'binary' | |
}); | |
} | |
// 2000 * 10 数据大约消耗307ms | |
var end = new Date(); | |
console.log('end' + (end - start)); | |
console.log(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])); | |
//wb.SheetNames[0]是获取Sheets中第一个Sheet的名字 | |
//wb.Sheets[Sheet名]获取第一个Sheet的数据 | |
document.getElementById("demo").innerHTML= JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) ); | |
}; | |
if(rABS) { | |
reader.readAsArrayBuffer(f); | |
} else { | |
reader.readAsBinaryString(f); | |
} | |
} | |
function fixdata(data) { //文件流转BinaryString | |
var o = "", | |
l = 0, | |
w = 10240; | |
for(; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w))); | |
o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w))); | |
return o; | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment