title: Form validation with more than one files and other input fields together
body: <p>I have a form that allows the user to input text and upload at least one file, with file size less than 1GB. When clicking "Submit" button of the form, this requirement will be validated by javascript. However, when I add the validation for files, it does not have any response for showing the name and size of the files, especially if the file exceeds 1GB.</p>
  
  <p>Which one of the following approaches would be better?</p>
  
  <ol>
  <li>Check the file size after selecting the file, if the file size exceeds 1GB, there will be an alert telling the user that the file is too large and need to choose again.</li>
  <li>After choosing file(s), when clicking "submit" button, before proceeding to PHP for uploading file(s) to the server, the validation of the whole form, including input text field and file size, is done with JavaScript.</li>
  </ol>
  
  <p>Here's my form:</p>
  
  <pre><code>&lt;script type="text/javascript" src="validate.js"&gt;&lt;/script&gt;
    &lt;form id="fileUpload" method="post" action="upload_action.php"&gt;
      &lt;p&gt;Text input: &lt;input type="text" name="text_input" value=""/&gt;&lt;/p&gt;
      &lt;p&gt;File upload: &lt;input type="file" name="upload_file[]" multiple/&gt;&lt;/p&gt;
      &lt;input type="submit" value="Submit" onclick="return validate_form();"/&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>And my validation JavaScript (<code>validate.js</code>):</p>
  
  <pre><code>function validate_form() {
      var valid=true;
      if (document.forms['fileUpload']['text_input'].value=='') {
          alert('You have to enter text');
          valid=false;
      }
  
      // File size validation goes here
  }
  </code></pre>
  
  <p>EDIT at 12:20pm Hong Kong Time:</p>
  
  <p>Now the check of the files' sizes can be done as follows:</p>
  
  <p>In PHP file:</p>
  
  <pre><code>&lt;form id="fileUpload" method="post" action="upload_action.php"&gt;
      &lt;p&gt;Text input: &lt;input type="text" name="text_input" value=""/&gt;&lt;/p&gt;
      &lt;p&gt;File upload: &lt;input type="file" id="upload_file" name="upload_file[]" multiple="true"&gt;&lt;/p&gt;
      &lt;input type="submit" value="Submit" onclick="return validate_form();"/&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>In javascript</p>
  
  <pre><code>var MAX_SIZE = 1073741824;
      var x=document.getElementById("upload_file");  
      for(var i=0; i&lt;x.files.length; i++)
      {
           if (x.files[i].size &gt; MAX_SIZE) {
              alert('The file "'+x.files[i].name+'" has exceeded the max file size, 1GB. Please choose smaller file.');
              valid=false;
              return false; 
           }
      }
  </code></pre>
  
  <p>But then I have to face another problem: when I selected the files from file dialog, I just saw the word "2 files" near the "choose" button, instead of the names of selected files. So what can I do so that the selected files' names can be shown? Thanks again!</p>