Simple file upload using AJAX and PHP

How to upload file using AJAX and PHP?

Simplest way to upload file is by using FormData. It is used in key/value pairs to send XMLHttpRequest. Initially FormData used to send all form elements data in key/value pair, but it can be used to send keyed data also. Data sent by FormData is in same format as used in form's submit() method. It sends upload data also, if we use multipart/form-data in form's encoding

Introduction

File can be uploaded using page submit in PHP. Sometimes we need to upload using jQuery and AJAX. This blog post helps to upload file using jquery and AJAX in simplest way. You find step by step process, which helps you to understand in better way.

index.html

Create index.html file and put following contents into it

<!Doctype HTML>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<form name="frmUpdload" id="frmUpdload" method="POST" enctype="multipart/form-data">
	<input type="file" name="txtFile" class="txtFile" />
	<input type="submit" name="btnSubmit" value="Submit" />
</form>
</body>
</html>

main.js

Create a js file, you can name it main.js

$(document).ready(function() {
	$("form#frmUpdload").submit(function() {
		//Image validation start
		var file_name=$('.txtFile').val();
		var index_dot=file_name.lastIndexOf(".")+1;
		var ext=file_name.substr(index_dot);
		if(file_name=='') {
			alert('Please upload image');
		}
		else if(!(ext=='png' || ext=='jpg' || ext=='jpeg')) {
			alert('Please upload jpg or png image only');
		}	//Image validation end
		else {
			//formdata object to send file upload data
			var formData = new FormData();
			formData.append('fileupload',$( '.txtFile' )[0].files[0], file_name);
			
			$.ajax({
				url: 'upload.php',
				 data: formData,
				 processData: false,
				 contentType: false,
				 type: 'POST',
				 success: function(data){
					alert(data);
				 }
			});
		}
		$('#frmUpdload')[0].reset();
		return false;
	});
});

upload.php

Create a PHP file, you can name it upload.php

<?php
//print_r($_FILES);	//Check all $_FILES variables
$files=$_FILES['fileupload'];
$tmp_name=$files['tmp_name'];
$name=$files['name'];
$destination=$name;
$res=move_uploaded_file($tmp_name, $destination);
if($res) {
	$msg='Uploaded successfully';
}
else {
	$msg='Error';
}
echo $msg;
?>

Browser compatibility

Chrome	Firefox	IE (Internet Explorer)	Opera	Safari
7.0	4.0	10	12	5

Conclusion

Simplest way to upload file using jquery and AJAX is FormData object.

Support : team at fbchandra dot com