我已經給出了這個JavaScript腳本來限制文件上傳之前的最大文件大小，但我不知道如何用我當前的代碼實現它。如何使用我的HTML實現這個最大文件大小腳本？

這裏是JavaScript：

<script type="text/javascript"> 

      function handleFileSelect(evt) { 
    var files = evt.target.files; // FileList object 

    // files is a FileList of File objects. List some properties. 
    var output = []; 
    for (var i = 0, f; f = files[i]; i++) { 
    console.log(f.size);  /*<--Here is your size of the file! :D*/ 
    } 
} 

document.getElementById('files').addEventListener('change', handleFileSelect, false); 

</script>

而我的HTML：

<label>Upload Image</label> 
<input type="file" name="image" /><br /> 
<input type="hidden" name="MAX_FILE_SIZE" value="5120" /></p> 
<p><input type="submit" id="submit" value="Upload" />

修改後的代碼：

<p><label>Upload Image</label> 

    <script type="text/javascript"> 
function handleFileSelect(evt) { 
    var files = evt.target.files; // FileList object 
    var max_size = 5120; // Max file size 

    // files is a FileList of File objects. List some properties. 
    var output = []; 
    for (var i = 0, f; f = files[i]; i++) { 
    // console.log(f.size); 
    if(f.size > max_size) { // Check if file size is larger than max_size 
    alert("Sorry, but the file that you selected is too large. Please upload a file that is no larger than " + max_size + " KB."); 
     return false; 
    } // end if 
    } // end for loop 
} // end function 

document.getElementById('files').addEventListener('change', handleFileSelect, false); 
</script> 

       <input type="file" name="image" id="files"/><br /> 
<input type="hidden" name="MAX_FILE_SIZE" value="5120" /></p> 
       <p><input type="submit" id="submit" value="Upload" /> 
      </p> 
     <p>&nbsp;</p> 
</form>

來源

2012-10-03 neeko

該方法並不完全，它使用'console.log'調試。如果'f.size'的比較值大於某個預定的閾值，那麼你可能會通過表單上的'onsubmit'事件返回false。如果由於最終用戶禁用JavaScript或執行一些其他魔術而導致大小過大，您仍然應該檢查後端。 – user17753

只需添加一個id屬性添加到文件輸入，因爲腳本正在尋找一個id的fi LES：

<label>Upload Image</label> 
<input type="file" name="image" id="files" /><br /> 
<input type="hidden" name="MAX_FILE_SIZE" value="5120" /> 
<p><input type="submit" id="submit" value="Upload" /></p>

http://jsfiddle.net/RnuT8/

順便說一句，請注意，該JavaScript可以通過簡單地禁用JavaScript，或者直接將文件上傳到服務器，而不使用您的形式很容易被繞過。我建議你用服務器端PHP上傳腳本檢查文件大小。

修改代碼

我已經修改了你的腳本，以便您可以輸入最大尺寸值，腳本會檢查它是否大於max_size與否：

window.onload = function() { 

    function handleFileSelect(evt) { 
     var files = evt.target.files; // FileList object 
     var max_size = 5120; // Max file size 

     // files is a FileList of File objects. List some properties. 
     var output = []; 
     for (var i = 0, f; f = files[i]; i++) { 
     // console.log(f.size); 
     if(f.size > max_size) { // Check if file size is larger than max_size 
      alert("Sorry, but the file that you selected is too large. Please upload a file that is no larger than " + max_size + " KB."); 
      return false; 
     } // end if 
     } // end for loop 
    } // end function 

    document.getElementById('files').addEventListener('change', handleFileSelect, false); 
}

但請記住，這是通過和文件大小也應該在服務器上驗證（JavaScript也是很好，並加速東西，但如果你想要安全，你必須在服務器上驗證它）。

來源

2012-10-03 20:38:07 Nathan

請注意，您還需要在服務器端驗證file_size。 –

@Nathan thankyou您的回覆，我仍然無法在文件開始上傳之前驗證工作，有什麼想法？ – neeko

@neeko我編輯了我的答案。請讓我知道它是否適用於您，如果確實如此，請記住點擊我的答案旁邊的複選標記以[接受它]（http://meta.stackexchange.com/a/5235/166675）:) – Nathan

腳本正在查找ID爲「files」的元素。嘗試在您的輸入上添加id，如下所示：

<input type="file" id="files" name="image" />

來源

2012-10-03 20:38:21

如何使用我的HTML實現這個最大文件大小腳本？

回答

修改代碼

相關問題