html表单动作和onclick

Question

Here is a php file named upload_file.php :

<?php
  if ($_FILES["file"]["error"] > 0) {
    echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
  } else {
    echo "Upload: " . $_FILES["file"]["name"] . "<br>";
    echo "Type: " . $_FILES["file"]["type"] . "<br>";
    echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
    echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";
    if (file_exists("upload/" . $_FILES["file"]["name"])) {
      echo $_FILES["file"]["name"] . " already exists. ";
    } else {
      move_uploaded_file($_FILES["file"]["tmp_name"],
      "upload/" . $_FILES["file"]["name"]);
      echo "Stored in: " . "upload/" . $_FILES["file"]["name"];
    }
  }
?>

When I call the above file with the html form:

<form action="upload_file.php" method="post" enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" id="file"><br>
<input type="submit" name="submit" value="Submit">
</form>

Everything works great and I manage to upload the selected file in the /upload local server folder.

My question: What is the equivalent of the above form if I want to use onclick? I.e. in the following code

<a href="#x" class="overlay" id="browse_file"></a>
        <div class="popup">
            <h2>Browse for your file</h2>
            <input type="file" name="file" id="file"><br>
            <input type="button" value="file" onclick= "location.href = 'upload_file.php'">
        </div>

that defines a popup window (that is controled by anothel modal dialog - thats why I do not want to use the form), what should be completed in order to pass the filename chosen to $_FILES when calling upload_file.php with onclick?

Thank you friends.

Answer 1

You should read about AJAX and javascript if you want to use onclick function with forms. There is very simple implementation of the ajax request in the jquery. Also you can easily get chosen file from the input by using jquery.