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

Question

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

這裏是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> 

Answer 1

只需添加一個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也是很好，並加速東西，但如果你想要安全，你必須在服務器上驗證它）。

Answer 2

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

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