Question

I have been given this JavaScript script to restrict max file size before it is uploaded, but I’m not sure how I would implement it with my current code.

Here is the 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>

And my 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" />

MODIFIED CODE:

  <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

Just add an id attribute to the file input, since the script is looking for an element with an id of files:

<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/

By the way, be aware that this JavaScript can be easily bypassed by simply disabling JavaScript or directly uploading the file to the server without using your form. I recommend that you check the file size with your server side PHP upload script as well.

Modified Code

I have modified your script so you can enter a max size value and the script will check if it is greater than max_size or not:

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);
}

But remember, this is passable and the file size should be validated on the server as well (the JavaScript is good too and speeds up stuff, but if you want security you must validate it on the server as well).