How to upload file using AJAX and PHP

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>

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;
	});
});

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;
?>

Leave a comment Cancel reply