<!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" name="" id="fileInput">
<script>
//獲取元素
var fileInput = document.querySelector("#fileInput");
//監聽事件
fileInput.onchange = function() {
//獲取文件
var file = this.files[0];
//讀取文件
var fileReader = new FileReader();
//轉換文件為ArrayBuffer
fileReader.readAsArrayBuffer(file);
//監聽完成事件
fileReader.onload = function() {
//打印arraybuffer的字節長度 也是文件的大小 到了這一步就可以使用arraybuffer進行
//文件的修改之類的操作了
console.log(fileReader.result.byteLength);
}
}
</script>
</body>
</html>
具體操作按照需要使用的情況而定
<!
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"
name=
""
id=
"fileInput">
<
script>
//獲取元素
var
fileInput
=
document.
querySelector(
"#fileInput");
//監聽事件
fileInput.
onchange
=
function() {
//獲取文件
var
file
=
this.
files[
0];
//讀取文件
var
fileReader
=
new
FileReader();
//轉換文件為ArrayBuffer
fileReader.
readAsArrayBuffer(
file);
//監聽完成事件
fileReader.
onload
=
function() {
//打印arraybuffer的字節長度 也是文件的大小 到了這一步就可以使用arraybuffer進行
//文件的修改之類的操作了
console.
log(
fileReader.
result.
byteLength);
}
}
</
script>
</
body>
</
html>