使用 JavaScript 上傳文件時驗證文件類型和大小

Question

我在 HTML 表單上使用 JavaScript 在加載之前檢查圖像的大小和類型。

我正在使用以下代碼：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 的初學者。

Answer 1

這有兩個綜合原因：

您返回 onchange 中兩個函數中的第一個。 這會阻止 javascript 調用 SizeValidation1()。 因此永遠不會調用 SizeValidation1 中的代碼。

你用：

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

改為使用：

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

在 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++) {

我希望這對你有幫助。 祝你有美好的一天：-）

使用 JavaScript 上傳文件時驗證文件類型和大小

問題描述

1 個解決方案

解決方案1
1 已采納 2020-08-13 21:42:51

使用 JavaScript 上傳文件時驗證文件類型和大小

問題描述

1 個解決方案

解決方案1 1 已采納 2020-08-13 21:42:51

解決方案1
1 已采納 2020-08-13 21:42:51