Ajax Image Upload using PHP and jQuery

Ajax Image Upload using PHP and jQuery

In this Post We Will Explain About is Ajax Image Upload using PHP and jQuery With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to upload image ajax jquery php mysql Example

In this post we will show you Best way to implement ajax image upload jquery php , hear for ajax image upload without refreshing page using jquery with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Step 1 : Create Image From

first of all simple create the HTML form to simple select and upload the any format image.Basic Note : For here in this example, Design we are using simple version of bootstrap.css

Also Read :  jQuery Ajax Image Upload without Page Refresh using PHP

Create file upload-ajax-image.php

<div class="col-md-12"><div id="uploadedimage"></div>
<form role="form"  id="liveUploadImgFunForm" enctype= "multipart/form-data"  action="javascript:void(0)" onsubmit="liveUploadImgFun(this);">
	<div class="form-group">
		<label for="file">Select Image</label>
		<input type="file" name="liveUploadImgFun" class="form-control" id="liveUploadImgFun"
		placeholder="select file">
	</div>
	<button type="submit" class="btn btn-primary">Upload</button>
</form>
</div>

Step 2: Create Js File

here simple Create imageupload.js

function liveUploadImgFun(this){
	$.ajax({
		url: "liveUploadImgFunajax.php",
		type: "POST",
		data: new FormData(this),
		contentType: false,
		cache: false,
		processData:false,
		success: function(data){
		$("#uploadedimage").html(data);
		}
	});
}

Step 3 : Create upload php file

Which will all the image upload the posted any format image by the simple using jquery and ajax and will upload or move in a Directory ie. target Directory in which We want to upload or store all the images on the any server side.Create liveUploadImgFun.php

$des_path = "imagesupload/";// upload directory
$upload = 1;
$des_file = $des_path . basename($_FILES["liveUploadImgFun"]["name"]);
$uploadOk = 1;
 // get uploaded file's extension
$check_img_FileTp = pathinfo($des_file,PATHINFO_EXTENSION);

 // check's valid format

if($check_img_FileTp != "jpg" && $check_img_FileTp != "png" && $check_img_FileTp != "jpeg"
&& $check_img_FileTp != "gif" ) {
	echo "Invalid images Format.Only simple JPG, or JPEG, or PNG or GIF files are data allowed.";
	$upload = 0;
	exit;


}if ($_FILES["liveUploadImgFun"]["size"] > 200000) {
	echo "Sorry, your file is very large.";
	$upload = 0;

	exit;
}
	if($upload == '1'){
	$data_str = '';
	if (move_uploaded_file($_FILES["liveUploadImgFun"]["tmp_name"], $des_file)) {
	$data_str .= "The file ". basename( $_FILES["liveUploadImgFun"]["name"]). " has been uploaded. Good Luck!!";
	$data_str .= "<img src='imagesupload/".$_FILES["liveUploadImgFun"]["name"]."'>";
} else {
	echo "Sorry,Your file not uploaded. there was some an error uploading your this file.";
}
}

You are Most welcome in my you tube Channel Please subscribe my channel. and give me Feed Back.
More Details……
Angularjs Example

Also Read :  jQuery Ajax File Upload images using PHP MySQLi

Example

I hope you have Got What is ajax image upload without refreshing page using jquery And how it works.I would Like to have Feed Back From My Blog(Pakainfo.com) readers.Your Valuable Feed Back,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.

Recommended For You.

jQuery Ajax Image Upload without Page Refresh using PHP
Today, We want to share with you jQuery Ajax Image Upload without Page Refresh using PHP. In this post we will

Add a Comment

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