" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
" Live as if you were to die tomorrow. Learn as if you were to live forever.. "
- Mahatma Gandhi
If we have read/seen it somewhere that ” File upload using Ajax”, then it is not through AJAX. File uploading is basically done through an iframe in this case. We have to use an iframe to upload the files. Honestly speaking implementing javascript code using an iframe is quiet difficult for a beginner. In that case, I would like to introduce jquery form plugin, please see the below description how it makes our job very simple.
Now, lets move to form with enctype=”multipart/formdata”, to upload a file using ajax. File uploading using AJAX is not possible. AJAX doesn’t actually post forms to the server, it sends selected data to the server in the form of a POST or GET request. As javascript is not capable of grabbing the file from the users machine and sending it to the server, it’s just not possible with AJAX. We have to resort to regular old form submit.
If you have read/seen it somewhere, then it is not through AJAX. File uploading occurs through an iframe in this case. We have to use a iframe to upload the files. As mentioned in the description implementing javascript code using an iframe is quiet difficult for a beginner. So, lets quickly solve this problem with the help of form plugin.
Please follow the following steps to upload a file:-
Step 1: Create a folder called “ajax_file_upload” in your test folder and create an html file named “file_upload.html” with the code exactly given below
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<!--we can also download the form plugin from this url-->
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
function form_submit() {
return false;
}
function showRequest() {
alert("form going to be submitted");
}
function showResponse(data) {
alert(data);
}
$(document).ready(function() {
var options = {
url: 'fileupload.php',
beforeSubmit: showRequest,
success: showResponse
};
$('#myForm').submit(function() {
// inside event callbacks 'this' is the DOM element so we first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
});
});
</script>
</head>
<body>
<form action="abc.php" id="myForm" enctype="multipart/form-data" method="POST" onSubmit="return form_submit();">|
<input type="file" name="myfile" />
<input type="submit" name="submit_button" id="submit_button" value="Submit File"/>
</form>
</body>
</html>
Step 2: Create your PHP file using the below code:
<?php
if (file_exists("temp/" . $_FILES["myfile"]["name"])) {
echo $_FILES["myfile"]["name"] . " already exists. ";
}
else {
move_uploaded_file($_FILES["myfile"]["tmp_name"],
"temp/" . $_FILES["myfile"]["name"]);
echo "Please check: " . "temp/" . $_FILES["myfile"]["name"];
}
?>
Mark we are getting $_FILES on the server-side and we can perform all kind of operations like(checking file size, file type etc) and echo the output in any form we require. Step 3: Create a "temp" folder inside the "ajax_file_upload" which is our present directory and please do not forget to give it permissions. Step 4: Use this link "http://localhost/test/ajax_file_upload/file_upload.html" to access the files. Upload a file. If the file gets successfully uploaded then we will get an alert or also if file already exists.