javascript - Form validation with more than one files and other input fields together -

I have a form that allows the user to upload text input and upload at least one file, from 1GB With less file size. When clicking the "Submit" button on the form, this requirement will be validated by JavaScript. However, when I add validation to the file, there is no response to display the file name and size, especially if the file is more than 1 GB.

Which of the following would be better?

1. Check the file size after selecting the file, if the file size is greater than 1 GB, then the user will be given an alert to say that the file is too large and it will To choose from.
2. After selecting the file, before going to PHP to upload the file to the server, clicking on the "Submit" button, the full form including the input text field and the file size validation, with Javascript is done .

Here's my form:

  & 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 = "article" name = "text_input" value = "" />  & Lt; / P & gt; & Lt; Input type = "submit" value = "submit" onclick = "return validate_form ();" /> & Lt; / Form & gt;  

and my validation javascript ( validate.js ):

  function validate_form () {var Valid = true; If (document.forms ['fileUpload'] ['text_input']. Value == '') {Warning ('You must enter text'); Legitimate = false; } // file size verification goes here}  

Edit at 12:20 pm Hong Kong:

Now the files can be checked as follows:

In the PHP file:

  & lt; Form id = "fileUpload" method = "post" action = "upload_action.php" & gt; & Lt; P & gt; Text input: & lt; Input type = "article" name = "text_input" value = "" />  & Lt; / Form & gt;  

In JavaScript,

  var MAX_SIZE = 1073741824; Var x = document.getElementById ("upload_file"); (Var i = 0; i & lt; x.files.length; i ++) {if (x.files [i] .size & gt; MAX_SIZE) {Warning ('file' '+ x.files [ I] .name + '"The maximum file size is more than 1GB. Please choose a smaller file.'); Legal = false; the description is false;}}  

but then one more The problem has to be faced: when I chose files from the file dialog, I saw the word "2" instead of the "Bus" button to name the selected files so that the names of the selected files can be shown Are you? Thank you!

Man I vote after inputting the file, so to correct the user right away The chance is given.

If I understand you correctly, then you can do something like this in the event of a change:

  var MAX = 1000000000; if (document Files. ['FileUpload'] ['text_input']. [0]. Size> MAX) {valid = false; warnings ('You have exceeded the maximum file size, 1 GB. '); Details are false; // no Submit}  

Hope it helps