使用 JavaScript / jQuery 上传时验证文件大小

在本文中，我们将学习如何通过使用 Javascript 和 jQuery 在上传前检查文件大小来实现文件大小验证。这是客户端验证的演示，旨在提供良好的用户体验。在某些情况下，与服务器端方法相比，客户端验证是一种更好的方法，因为它消耗的时间更少。
例如，如果我们不允许上传大于 4MB 或小于 2MB 的文件，我们可以使用客户端验证来检查用户选择的文件是否符合给定的要求，如果不符合，给他们一个消息，因此他们不会花费所有时间上传文件只是为了让服务器抛出错误。

方法一：

• 侦听输入上的更改事件。
• 检查是否选择了任何文件files.length > 0 。
• 通过 files.item(i).size获取文件的大小。
• 该值将以字节为单位。根据需要将其转换为任何单位，在本例中为兆字节，通过Math.round((filesize/1024)) 。
• 检查尺寸是否符合您所需的标准。

示例 1：

Javascript

  

    File Validation-1

  

      

        
    
  
  
    
  

  

    Filevalidation = () => {
        const fi = document.getElementById('file');
        // Check if any file is selected.
        if (fi.files.length > 0) {
            for (const i = 0; i <= fi.files.length - 1; i++) {
  
                const fsize = fi.files.item(i).size;
                const file = Math.round((fsize / 1024));
                // The size of the file.
                if (file >= 4096) {
                    alert(
                      "File too Big, please select a file less than 4mb");
                } else if (file < 2048) {
                    alert(
                      "File too small, please select a file greater than 2mb");
                } else {
                    document.getElementById('size').innerHTML = '<b>'
                    + file + '</b> KB';
                }
            }
        }
    }

  

输出：
上传文件前：

如果文件大于 4MB：

如果文件小于 2MB：

成功上传后：

方法2：
在下面的例子中，我们将学习如何使用 jQuery 来做同样的事情。

• 侦听输入上的更改事件。
• 通过 this.files[0].size获取文件的大小。
• 您也可以通过 toFixed()方法对获得的值进行四舍五入。
• 检查尺寸是否符合您所需的标准。

示例 2：

Javascript

  

    
    JQuery File Validation
    
  

  

    
    
  
  
    
        $('#file').on('change', function() {
  
            const size = 
               (this.files[0].size / 1024 / 1024).toFixed(2);
  
            if (size > 4 || size < 2) {
                alert("File must be between the size of 2-4 MB");
            } else {
                $("#output").html('<b>' +
                   'This file size is: ' + size + " MB" + '</b>');
            }
        });
    

  

输出：
在上传文件之前：

如果文件小于 2MB 或大于 4MB：

成功上传后：

JavaScript 以网页开发而闻名，但它也用于各种非浏览器环境。您可以按照此 JavaScript 教程和 JavaScript 示例从头开始学习 JavaScript。

HTML 是网页的基础，用于通过构建网站和 Web 应用程序进行网页开发。您可以按照此 HTML 教程和 HTML 示例从头开始学习 HTML。