当用户需要在网站上上传文件时，我们可能需要进行文件大小的限制。JavaScript可以通过文件对象（File对象）来获取上传文件的大小。
具体步骤如下：
- 获取文件对象
首先，在HTML表单中添加一个文件输入框，使用JavaScript获取该输入框对应的文件对象。例如：
<input type="file" id="fileInput">
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
- 计算文件大小
获取文件对象后，可以通过其size属性获取文件大小，单位为字节。例如：
const fileSize = file.size;
- 格式化文件大小显示
获取的文件大小单位为字节，对于用户来说不太友好。我们可以使用JavaScript代码将其转化为更友好的单位，例如将其转化为MB或KB显示。示例代码如下：
function formatFileSize(fileSize){
if (fileSize < 1024) {
return fileSize + 'B';
} else if (fileSize < (1024*1024)){
let temp = fileSize / 1024;
temp = temp.toFixed(2);
return temp + 'KB';
} else if (fileSize < (1024*1024*1024)) {
let temp = fileSize / (1024*1024);
temp = temp.toFixed(2);
return temp + 'MB';
} else {
let temp = fileSize / (1024*1024*1024);
temp = temp.toFixed(2);
return temp + 'GB';
}
}
const fileSize = file.size;
const formattedSize = formatFileSize(fileSize);
console.log(formattedSize);
上述代码中，formatFileSize函数接收一个文件大小，单位为字节，通过if-else语句不断转换最终输出格式化后的文件大小。函数内部涉及到了toFixed方法，用于将一个数字保留指定位数小数。
完整示例代码可以在下面查看：
<!DOCTYPE html>
<html>
<head>
<title>获取文件大小示例代码</title>
<meta charset="utf-8">
</head>
<body>
<form>
<input type="file" id="fileInput">
<button type="button" onclick="getFileSize()">获取文件大小</button>
</form>
<p id="fileSize"></p>
<script>
// 获取文件大小，并显示在页面上
function getFileSize() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
const fileSize = file.size;
const formattedSize = formatFileSize(fileSize);
document.getElementById('fileSize').textContent = `文件大小为：${formattedSize}`;
}
// 格式化文件大小显示，将文件大小从bytes转化为KB/MB/GB
function formatFileSize(fileSize){
if (fileSize < 1024) {
return fileSize + 'B';
} else if (fileSize < (1024*1024)){
let temp = fileSize / 1024;
temp = temp.toFixed(2);
return temp + 'KB';
} else if (fileSize < (1024*1024*1024)) {
let temp = fileSize / (1024*1024);
temp = temp.toFixed(2);
return temp + 'MB';
} else {
let temp = fileSize / (1024*1024*1024);
temp = temp.toFixed(2);
return temp + 'GB';
}
}
</script>
</body>
</html>
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js获取上传文件大小示例代码 - Python技术站
微信扫一扫 
支付宝扫一扫 