␡
- AJAX-Like File Uploads with jQuery
- Setting Up the PHP Script
- Creating the HTML Form
- Building the jQuery Script
- Wrapping Up
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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 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"> </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.