PHP and Ajax Asynchronous File Upload using jQuery

PHP and Ajax Asynchronous File Upload using jQuery

In this Post We Will Explain About is PHP and Ajax Asynchronous File Upload using 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 File in PHP using Jquery AJAXExample

In this post we will show you Best way to implement Ajax File Upload with PHP, HTML5 File API and jQuery, hear for Upload Files Using jQuery Ajax and PHP Without Page Refreshwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Also Read :  Create Different CSS Geometric Shapes with Example

The need to we should know before simple following this Post:
1.PHP
2.HTML
3.jQuery
4.CSS and
5.Bootstrap

Form and HTML Input Field: The basic simple need to upload Your file is to have HTML form tag with enctype=”multipart/form-data” add or put, if we offers the above file we have to added form with some file extentions enctype, next is the HTML input field of file type, as well as we have this input field with the ID like as a “my_live_file_upload”.

index.html(Make a HTML file and define markup)

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pakainfo.com Demo - PHP File upload using jQuery Steps</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.5-dist/css/bootstrap.css" />
</head>
<body>
 
<div class="container">
	<div class="row">
		<div class="col-sm-12">
		<h2>Pakainfo.com Example of PHP File Upload using jQuery Step By Step</h2>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-6 col-sm-offset-0">
			<div class="form-group">
			<form enctype="multipart/form-data">
			<label>Select Any File to Upload</label>
			<input id="my_live_file_upload" type="file" class="form-control" />
			</form>
			</div>
			<div class="form-group">
			<button onclick="fileuploads()" class="btn btn-primary">Submit</button>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

Script.js(Make a js file and define scripting)

function fileuploads()
{
if($("#my_live_file_upload").val() != "")
{
var file_data = $('#my_live_file_upload').prop('files')[0];
var liveForm_data = new FormData();
 
liveForm_data.append('file', file_data);
 
	$.ajax({
		url: 'fileuploads.php', 
		dataType: 'text', 
		cache: false,
		contentType: false,
		processData: false,
		data: liveForm_data,
		type: 'post',
		success: function(data){
		     alert(data);
		$("#my_live_file_upload").val("");
		}
	});
}
else
{
	alert("Please Any select file!");
}
}

fileuploads.php(Server Side Page)

//check conditions using PHP
if ( 0 < $_FILES['file']['error'] ) {
echo 'Some Error: ' . $_FILES['file']['error'] . '<br>';
}
else
{
	//upload file using PHP
	move_uploaded_file($_FILES['file']['tmp_name'], 'files/' . $_FILES['file']['name']);
	echo "Your Live File uploaded successfully Good Luck!!";
}
?>

Example

Also Read :  Publishing Ionic app to Google Play Store App Release

I hope you have Got What is Ajax File Upload with PHP, HTML5 File API and jQuery And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.

Recommended For You.

jQuery Ajax File Upload images using PHP MySQLi Today, We want to share with you jQuery Ajax File Upload images using

Add a Comment

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