使用 JavaScript 上传时的文件类型验证

在本文中，我们将学习如何在使用Javascript上传之前通过检查文件扩展名来实现文件类型验证。这是客户端验证的演示，旨在提供良好的用户体验。在某些情况下，与服务器端方法相比，客户端验证是一种更好的方法，因为它消耗的时间更少。

使用 JavaScript，您可以轻松检查所选文件扩展名是否具有允许的文件扩展名，并可以限制用户仅上传允许的文件类型。为此，我们将使用fileValidation()函数。我们将创建包含完整文件类型验证代码的fileValidation()函数。在这个函数，我们将使用正则表达式根据给定的模式检查文件类型。

下面的例子实现了上述方法：

示例 1：在此示例中，我们仅上传扩展名为 .jpeg/.jpg/.png/.gif 的文件。我们将扩展名列表存储在一个变量中，并将它们中的每一个与上传的文件扩展名进行比较。为了将扩展名与上传的文件分开，我们将使用正则表达式，如果上传的文件扩展名遵循文件类型，我们还会预览上传的文件。

  

    
        File Type Validation while
        Uploading it using JavaScript
    
  
    
        h1 {
            color: green;
        }
          
        body {
            text-align: center;
        }
    

  

     
        GeeksforGeeks 
    
  
     
        Validation of file type while 
        uploading using JavaScript? 
    
  
    
    Upload an Image
    
  
    
    
    
        function fileValidation() {
            var fileInput = 
                document.getElementById('file');
              
            var filePath = fileInput.value;
          
            // Allowing file type
            var allowedExtensions = 
                    /(\.jpg|\.jpeg|\.png|\.gif)$/i;
              
            if (!allowedExtensions.exec(filePath)) {
                alert('Invalid file type');
                fileInput.value = '';
                return false;
            } 
            else 
            {
              
                // Image preview
                if (fileInput.files && fileInput.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        document.getElementById(
                            'imagePreview').innerHTML = 
                            '<img src="' + e.target.result
                            + '"/>';
                    };
                      
                    reader.readAsDataURL(fileInput.files[0]);
                }
            }
        }
    

  

输出：

示例 2：仅上传扩展名为 .doc/.docx/.odt/.pdf/.tex/.txt/.rtf/.wps/.wks/.wpd 的文件。将扩展名列表存储在一个变量中，并将它们中的每一个与上传的文件扩展名进行比较。为了将扩展名与上传的文件分开，我们将使用正则表达式。

  

    
        File Type Validation while
        Uploading it using JavaScript
    
  
    
        h1 {
            color: green;
        }
          
        body {
            text-align: center;
        }
    

  

     
        GeeksforGeeks 
    
  
     
        Validation of file type while 
        uploading using JavaScript? 
    
  
    
    Upload an Image
    
  
    
    
    
        function fileValidation() {
            var fileInput = 
                document.getElementById('file');
              
            var filePath = fileInput.value;
          
            // Allowing file type
            var allowedExtensions = 
/(\.doc|\.docx|\.odt|\.pdf|\.tex|\.txt|\.rtf|\.wps|\.wks|\.wpd)$/i;
              
            if (!allowedExtensions.exec(filePath)) {
                alert('Invalid file type');
                fileInput.value = '';
                return false;
            } 
        }
    

  

输出：