In this tutorial we’ll see how to upload a file with using jQuery and PHP.
Pre-Requirements
- make sure your server temp folder has file writing permission.
- your server disk space is not full.
- webserver user has write permission on /tmp or upload directory.
jQuery Setup
- you could use latest version of jQuery i.e. 2.x or even older 1.x.x as this code doesn’t need any dependency of newer api.
- I’d prefer google cdn for this example
<HEAD> Section
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
#upload_frame {
display:none;
height:0;
width:0;
}
#msg {
background-color:#FFE07E;
border-radius:5px;
padding:5px;
display:none;
width:200px;
font:italic 13px/18px arial,sans-serif;
}
</style>
File upload form
<div> <form id="file_upload_form" action="upload.php" > <label for="upload_field">Select File</label> <input type="file" id="upload_field" name="upload_field" /> <input type="submit" value="Upload" /> </form> <div id="msg"></div> <pre id="server_response"></pre> </div>
Now JQuery part
jQuery(document).ready(
function(){
jQuery('#file_upload_form').submit(function(){
// show loader [optional line]
$('#msg').html('uploading....').fadeIn();
if(document.getElementById('upload_frame') == null) {
// create iframe
$('body').append('<iframe id="upload_frame" name="upload_frame"></iframe>');
$('#upload_frame').on('load',function(){
if($(this).contents()[0].location.href.match($(this).parent('form').attr('action'))){
// display server response [optional line]
$('#server_response').html($(this).contents().find('html').html());
// hide loader [optional line]
$('#msg').hide();
}
})
$(this).attr('method','post');
$(this).attr('enctype','multipart/form-data');
$(this).attr('target','upload_frame').submit();
}
});
}
);
PHP Code (upload.php)
<?php sleep(5); print_r($_FILES); ?>
So, what’s going on here
We created html form <#file_upload_form>. Then assigned jQuery submit() function to override form submit action. So, on from submit even following function will be called.
jQuery('#file_upload_form').submit(function(){....});
Now try to create and insert dynamic iframe into HTML document.
$('body').append('<iframe id="upload_frame" name="upload_frame"></iframe>');
Once iframe is inserted into your HTML document let’s set form action into iframe.
$(this).attr('method','post');
$(this).attr('enctype','multipart/form-data');
$(this).attr('target','upload_frame').submit();
So, now when you click submit button form is submitted to iframe which loads upload.php
Once upload.php is loaded we should do some action to convey user that upload has been done.
So, on iframe load even we get its content and display to user.
$('#upload_frame').on('load',function(){
if($(this).contents()[0].location.href.match($(this).parent('form').attr('action'))){
// display server response [optional line]
$('#server_response').html($(this).contents().find('html').html());
// hide loader [optional line]
$('#msg').hide();
}
});
for demo purpose (to see ajax loader) we use sleep(5); function in upload.php file
