JavaScript 文件上传大小验证

javascript validation file-upload

2022-08-29 23:50:21

有没有办法在使用JavaScript上传之前检查文件大小？

答案 1

是的，您可以使用文件 API 来实现此目的。

下面是一个完整的示例（请参阅注释）：

document.getElementById("btnLoad").addEventListener("click", function showFileSize() {
    // (Can't use `typeof FileReader === "function"` because apparently it
    // comes back as "object" on some browsers. So just see if it's there
    // at all.)
    if (!window.FileReader) { // This is VERY unlikely, browser support is near-universal
        console.log("The file API isn't supported on this browser yet.");
        return;
    }

    var input = document.getElementById('fileinput');
    if (!input.files) { // This is VERY unlikely, browser support is near-universal
        console.error("This browser doesn't seem to support the `files` property of file inputs.");
    } else if (!input.files[0]) {
        addPara("Please select a file before clicking 'Load'");
    } else {
        var file = input.files[0];
        addPara("File " + file.name + " is " + file.size + " bytes in size");
    }
});

function addPara(text) {
    var p = document.createElement("p");
    p.textContent = text;
    document.body.appendChild(p);
}

body {
    font-family: sans-serif;
}

<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load'>
</form>

有点偏离主题，但是：请注意，客户端验证不能替代服务器端验证。客户端验证纯粹是为了提供更好的用户体验。例如，如果您不允许上传超过5MB的文件，则可以使用客户端验证来检查用户选择的文件大小是否不超过5MB，如果是，则给他们一个很好的友好消息（因此他们不会花费所有时间上传只是为了将结果丢弃在服务器上），但您还必须在服务器上强制实施该限制，因为可以规避所有客户端限制（和其他验证）。

答案 2

使用 jquery：

$('#image-file').on('change', function() {
  console.log('This file size is: ' + this.files[0].size / 1024 / 1024 + "MiB");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form action="upload" enctype="multipart/form-data" method="post">

  Upload image:
  <input id="image-file" type="file" name="file" />
  <input type="submit" value="Upload" />


</form>