js获取上传文件大小示例代码

2023年5月27日上午10:25 • JavaScript

当用户需要在网站上上传文件时，我们可能需要进行文件大小的限制。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技术站

js获取上传文件大小示例代码

相关文章