jQuery AJAX file Image upload PHP Example

jQuery AJAX file Image upload PHP Example

Today, We want to share with you jQuery AJAX file Image upload PHP Example.
In this post we will show you jQuery AJAX file Image upload PHP Example, hear for jQuery AJAX file Image upload PHP Example we will give you demo and example for implement.
In this post, we will learn about jQuery AJAX file Image upload PHP Example with an example.

Ajax image or file upload using jQuey function used and PHP send serverside data will give nice more user experience than HTML elements form posting data.- Ajax Image Upload With Resize Using jQuery PHP More Example in my Next Post.

jQuery Ajax File Upload Without Page Refresh in PHP

Also Read :  Auto Post on Facebook Page using Facebook PHP API

Simple create a Dir name : images

index.html

<html>
<head>
<title>Example of PHP AJAX Image Upload</title>
<script src="webapp/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
	$("#uploadForm").on('submit',(function(e) {
		e.preventDefault();
		$.ajax({
        	url: "do-upload.php",
			type: "POST",
			data:  new FormData(this),
			contentType: false,// boolean (true or false)
    	    cache: false,// boolean (true or false)
			processData:false,// boolean (true or false)
			success: function(data)
		    {
				//display response
			$("#responsedata").html(data);
		    },
		  	error: function() 
	    	{
	    	} 	        
	   });
	}));
});
</script>
</head>
<body>
<div>
<form id="uploadForm" action="do-upload.php" method="post">
<div id="responsedata">No Image</div>
<div id="uploadFormLayer">
<label>Simple Upload Image File:</label><br/>
<input name="productimg" type="file" />
<br/>
<input type="submit" value="Submit" />
</form>
</div>
</div>
</body>
</html>

do-upload.php

<?php
if(is_array($_FILES)) {
	if(is_uploaded_file($_FILES['productimg']['tmp_name'])) 
	{
		$sourcePath = $_FILES['productimg']['tmp_name'];
		$targetPath = "images/".$_FILES['productimg']['name'];
		if(move_uploaded_file($sourcePath,$targetPath)) 
		{
		?>
			<img src="<?php echo $targetPath; ?>" alt="" title="" width="200px" height="200px" />
		<?php
		}
	}
}
?>

HTML part

<input id="sortpicture" type="file" name="sortpic" />
<button id="upload">Upload</button>

Script Code

//on click the upload button
$('#upload').on('click', function() {
 //store this temp file name
    var file_data = $('#sortpicture').prop('files')[0]; 
	//created object on new file
    var form_data = new FormData();   
	//append this file information
    form_data.append('file', file_data);
    alert(form_data); 
	//call ajax jquery send data in php script
    $.ajax({
                url: 'do-upload.php', // point to server-side(do-upload.php) PHP script 
                dataType: 'text',
                cache: false, // boolean (true or false)
                contentType: false, // boolean (true or false)
                processData: false, // boolean (true or false)
                data: form_data,  // all data parameter                    
                type: 'post',
                success: function(data_response){
                    alert(data_response); // all display response get to from the PHP script then success response
                }
     });
});

do-upload.php

<?php
	print_r($_REQUEST);
	//check condtion error or not
    if ( 0 < $_FILES['file']['error'] ) {
		//display error
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
		// move the upload folder in this root 
        move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
    }

?>

View Demo

Also Read :  country state city Dynamic dependent dropdown using jquery in codeigniter

We hope you get an idea about jQuery AJAX file Image upload PHP Example
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.

Searches related to :jQuery AJAX file Image upload PHP Example

  • upload image using ajax in php example
  • upload image ajax jquery php mysql
  • upload file using ajax in php example
  • ajax file upload jquery example
  • file upload using ajax in php
  • ajax form submit with file upload in php
  • ajax image upload without refreshing page using jquery
  • upload image using ajax without form
Also Read :  Top 10 ASP.NET MVC Interview Questions and Answers

Leave a Reply

Your email address will not be published. Required fields are marked *