Блог

Главная - Вопросы по программированию - Проверка типа и размера файла при его загрузке с помощью JavaScript

Проверка типа и размера файла при его загрузке с помощью JavaScript

#javascript

#javascript

Вопрос:

Я использую JavaScript в HTML-форме для проверки размера и типа изображений перед их загрузкой.

Я использую следующий код: JS test.html

     <!DOCTYPE html> 
<html> 
<head> 
    <title> 
        File Type Validation while 
        Uploading it using JavaScript 
    </title> 
    <style> 
        h1 { 
            color: green; 
        } 
          
        body { 
            text-align: center; 
        } 
    </style> 
</head>
<body>
<h1> MyForm</h1>
<h3>  
        Validation of file type and size whileuploading using JavaScript?  
    </h3> 
    <!-- File input field 1 -->
    <p>Upload an Image 1</p> 
    <input type="file" id="image1"
        onchange="return TypeValidation1(); SizeValidation1();" />
     <!-- File input field 2-->
    <p>Upload an Image 2</p> 
    <input type="file" id="image2"
        onchange="return TypeValidation2(); SizeValidation2();" />
    <!-- Script TypeValidation file 1 -->
     <script> 
        function TypeValidation1() { 
            var fileInput =  
                document.getElementById('image1');   
            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; 
            }  
        } 
        </script>
         <!-- Script TypeValidation file 2 -->   
    <script> 
        function TypeValidation2() { 
            var fileInput =  
                document.getElementById('image2');   
            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; 
            }  
        } 
        </script>
    <!-- Script SizeValidation file 1 -->
<script>
function SizeValidation1() {  
        const fi = document.getElementById('image1'); 
        // 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"); 
                } 
            } 
        } 
    } 
    </script>   
        <!-- Script SizeValidation file 2 -->
<script>
function SizeValidation2() {  
        const fi = document.getElementById('image2'); 
        // 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"); 
                } 
            } 
        } 
    }    
    </script> 
</body>  
</html>

Код проверяет тип изображений, но не может проверить размер.
даже для реализации двух сценариев в одном событии «onChange» я не знаю, хорошо ли оно написано.
помогите, пожалуйста, знайте, что я новичок в JavaScript.

Комментарии:

1. fi.files[i].size

2. @full-stack подробнее, если возможно

3. замените эту строку кода const fsize = fi.files.item(i).size; на const fsize = fi.files[i].size

4. @full-stack Я внес изменения, но код по-прежнему проверяет тип, а не размер.

Ответ №1:

Для этого есть две объединенные причины:

  1. Вы возвращаетесь к первой из двух функций в onchange. Это останавливает javascript от вызова SizeValidation1(). Поэтому код в SizeValidation1 никогда не вызывается.

Вы используете:

 <input type="file" id="image1" onchange="return TypeValidation1(); SizeValidation1();" />

вместо этого используйте:

 <input type="file" id="image1" onchange="TypeValidation1(); SizeValidation1();" />
  1. В цикле for вы используете ‘const’ для определения i. Это должно быть ‘var’, поскольку вы при следующем запуске цикла переопределите значение i .

Вы используете:

 for (const i = 0; i <= fi.files.length - 1; i  ) {

Вместо этого используйте:

 for (var i = 0; i <= fi.files.length - 1; i  ) {

Я надеюсь, что это поможет вам. Хорошего дня 🙂