Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Ajax and JavaScript

  • Print
  • + Share This
From the author of

Creating the HTML Form

Next, you will establish the HTML file, uploadForm.html. There is nothing special here, just straightforward HTML and CSS. The completed form is shown in Figure 2.

Figure 2

Figure 2 Completed HTML form.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>File Upload Form</title>
        <style type="text/css">
        .thankyouModal {
            display: none;
            background: #FFF5DC;
            color: #040240;
            padding: 20px;
            border: 10px solid #990100;
            float: left;
            font-size: 1.2em;
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: 200;
        }
        </style>
        <script src="jquery-1.6.4.min.js" type="text/javascript"></script>
        <script src="fileUpload.js" type="text/javascript"></script>
    </head>
    <body>
<h2>Upload</h2>
    <form enctype="multipart/form-data" name="fileUpload" id="uploadForm" action="processUpload.php" method="post">
        <input type="hidden" name="MAX_FILE_SIZE" value="500000" />
        <label class="label" for="upload">Select File: </label><input type="file" name="upload" id="upload" value="" size="48" /><br /><br />
        <label class="label">&nbsp;</label><input type="submit" id="submitUpload" value="Upload" /><input type="reset" value="Clear" />
    </form>
    </body>
</html>

You can now start uploading files to your server as this form will work with the PHP upload script that you already created. The form page will be reloaded once the file is uploaded to the server because the jQuery script is not established at this point.

  • + Share This
  • 🔖 Save To Your Account