- 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
Building the jQuery Script
It is time to create the jQuery script to be called fileUpload.js. Let’s take a step-by-step approach to this so that I can explain the actions performed by the jQuery and Javascript code:
Start by setting up a document ready function. All of the upload action and subsequent notification code will be wrapped within this function.
$(document).ready(function() { $(function(){Use jQuery to select the id of the upload form. Bind the form to jQuery’s submit method. The submit method is called when the submit button of the form is clicked.
$('#uploadForm').submit(function(){Append a hidden input field to the form. The data here will be used to let the PHP script know that JavaScript is indeed turned on so no redirect from the PHP script needs to take place.
$('<input type="hidden" name="javascript" value="yes" />').appendTo($(this));Name, create, and configure the HTML iframe element that will be appended to the page.
var iframeName = ('iframeUpload'); var iframeTemp = $('<iframe name="'+iframeName+'" src="about:blank" />'); iframeTemp.css('display', 'none');Append the HTML iframe element to the body of the page.
$('body').append(iframeTemp);Next, select all of the attributes for the form being submitted and post those attributes to the iframe element where the script (the PHP script you created earlier) is referenced. At this point, the upload of the file takes place.
/* submit the uploadForm */ $(this).attr({ action: 'processUpload.php', method: 'post', enctype: 'multipart/form-data', encoding: 'multipart/form-data', target: iframeName });
By using HTML attributes that are normally available, you can target the post of the form to the iframe element that you created. In Figure 3, the hidden iframe is revealed and you can see the message that PHP has echoed to the screen after a file upload has been performed.
)
Figure 3 Message that PHP has echoed.
All that is left to do now is notify the user and perform some cleanup. The next few lines of fileUpload.js will handle those tasks.
Create a setTimeout wrapper for the remainder of the functions in the file upload script. The reason that this is done is to prevent presenting jarring transitions to the website visitor.
setTimeout(function(){Remove the iframe element from the markup because it is no longer needed.
iframeTemp.remove();
Remove the input field that was appended to the form to let the PHP script know that JavaScript was active. In the event JavaScript gets turned off before the user uploads his next file, this will allow the PHP script to work normally.
$('input[name="javascript"]').remove();Now you will set up a little code that will keep the “thank you” modal window from being displayed if a website visitor clicks the submit button on the form without actually choosing a file. First initialize the input length.
inputLength = 0;
Get the input length of the actual input (there is only one on this form; you can set up a loop if you have more than one input).
inputLength += $('input[name="upload"]').val().length;Display the modal window if the input is greater than zero.
if(0 < inputLength){ $('body').append('<div id="ty" class="thankyouModal"><h3>Thank You! Your upload is complete...</h3></div>');Get the height and width of the modal window, and calculate the left and top margin of the modal window so that the window can be centered in the display area of the browser. In order to be accurate, you have to add the combined height and width of the border and padding to the height and width of the modal window. The border and padding dimensions are defined in the CSS that was coded into the form’s HTML file.
var modalMarginTop = ($('#ty').height() + 60) / 2; var modalMarginLeft = ($('#ty').width() + 60) / 2;Apply the calculated margins to the modal window.
/* apply the margins to the modal window */ $('#ty').css({ 'margin-top' : -modalMarginTop, 'margin-left' : -modalMarginLeft });Fade the modal window into view. While the modal window is visible, clear the form input.
$('.thankyouModal').fadeIn('slow', function(){ $('input[name="upload"]').val('');Figure 4 shows the modal window faded into view, centered in the browser window, and that the input element has been cleared.
Figure 4 Modal window fades into view and input element is cleared.
Fade the modal window away slowly.
$(this).fadeOut(1500, function() {Remove the modal window from the DOM.
$(this).remove();
Close out all of the brackets for the modal window functions.
}); }); };Finally, close out the setTimeout call and apply a one second time. Then add all of the closing brackets for the remaining jQuery functions and the code is complete.
}, 1000); }); }); });
)