Jquery is a Client Side programming language. Independently using jquery it is not possible to upload a file to PHP Server. To upload a file using jquery what we can do is we can use jquery post method to send the file to the Server. Then in Server we required a PHP script to upload the file to the respective physical folder. In the below example I am uploading a file to PHP Server using JQuey AJAX File Upload technique.
In HTML I have 2 Controls an input box with type=”file” and a Submit button. These 2 controls are inside the form element. The form “frmUploading” is with action=”php-uploader.php” to my PHP page. The form enctype type is “multipart/form-data”. In head section I embedded 2 jquery libraries (jquery.min.js & jquery.form.min.js). Using input type file after the user choose the file successfully I am submitting the form inside jquery document.ready() method using jquery form Ajax method ajaxForm().
AJAX-File-Upload.htm
<!DOCTYPE html>
<head>
<title>JQuey AJAX File Upload Example</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>
</head>
<body>
<h2>AJAX File Upload Example</h2>
<form id="frmUploading" action="php-uploader.php" method="post" enctype="multipart/form-data">
<input type="file" size="70" name="fileSelector" />
<input type="submit" value="Upload your File" />
</form>
<script type="text/javascript">
var options = {
beforeSend: function()
{
/*In this block you can initiate any value before Uploading. */
},
uploadProgress: function(event, position, total, percentComplete)
{
/*During a large file uploading in this event you can show progress bar. */
},
success: function()
{
/*This block executes after file successfully uploaded. */
},
complete: function(response)
{
/*Once your file uploaded successful at the end you show a message here. */
},
error: function()
{
/*In-case file uploading get failure here you can show errors. */
}
$(document).ready(function()
{
/*Submitting the form using jquery form Ajax method. */
$("#frmUploading").ajaxForm(options);
});
</script>
</body>
</html>
Using jquery form once the file post to the Server. There I am executing the below script. To upload the user file I created a folder in root with the name “uploads”. That folder path I am storing in “$upload_dir” php variable. Using isset($_FILES[“fileSelector”]) I am checking whether the user choose file successfully or not. If it is returning true then I am checking is there any error in fileSelector or else using php move_uploaded_file() method uploading the file. To run this demo app first create the above index.htm file. Then create the below php file in the same folder. Here I am uploading my files to “uploads” folder. You can update this as per your folder location.
php-uploader.php
<?php
/* where you want to upload your file, define that folder path here. */
$upload_dir = "uploads/";
if(isset($_FILES["fileSelector"]))
{
/* using this block you can filter the file types */
if ($_FILES["fileSelector"]["error"] > 0)
{
echo "Error Occurred: " . $_FILES["file"]["error"] . "<br />";
}
else
{
/* move the uploaded file to uploads folder */
move_uploaded_file($_FILES["fileSelector"]["tmp_name"],$upload_dir. $_FILES["fileSelector"]["name"]);
echo "Your file :" . $_FILES["fileSelector"]["name"] . " uploaded successfully.";
}
}
?>
