Upload an image without a form submitting using ajax – onlinecode

Upload an image without a form submitting using ajax – onlinecode

In this post we will give you information about Upload an image without a form submitting using ajax – onlinecode. Hear we will give you detail about Upload an image without a form submitting using ajax – onlinecodeAnd how to use it also give you demo for it if it is necessary.

Today, In this tutorial, we will be explaining how to Upload an image without a form submitting using ajax. many people say it is possible to upload an image without a form submitting but it is possible. so let’s go we use this tutorial to make possible.

We have used jquery and ajax and in this below file. we have taken also FormData() object.

When the user clicks on button then we will get the image data and it is passed into FormData() object and call the ajax with FormData() object data.

index.php

PHP
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Upload an image without a form submitting using ajax - onlinecode</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="#">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0https://onlinecode.org/js/bootstrap.min.js"></script>
  <script>
	$(document).ready(function(){
		$('#btnUpload').on('click', function() {
			var file_data = $('#fileImage').prop('files')[0];
			var form_data = new FormData();
			form_data.append('file', file_data);

			$.ajax({
					url         : 'upload.php',     
					dataType    : 'text',           
					cache       : false,
					contentType : false,
					processData : false,
					data        : form_data,                         
					type        : 'post',
					success     : function(output){
						if(output=="File Uploaded Successfully")  
						{
							$('.error').html('<div ><strong>Success!</strong> '+output+'</div>');
						}
						else if(output=="Only allowed jpeg,jpg and png extension")
						{
							$('.error').html('<div ><strong>Danger!</strong> '+output+'</div>');
						}
						else{
							$('.error').html('<div ><strong>Danger!</strong> '+output+'</div>');
						}
							
					}
			 });                
		});
	});
</script>
</head>
<body>

<div  style="margin-top:25px;">	
  <div ></div>
    <div >
		<label for="fileImage">Upload a Image:</label>
		<input id="fileImage" type="file" name="fileImage" />
    </div>
	<button id="btnUpload" >Upload</button>
</div>
</body>
</html>

upload.php

When ajax call the upload.php file then the image will be upload into images directory.

PHP
<?php
$src = $_FILES['file']['tmp_name'];
$targ = "images/".$_FILES['file']['name'];

$validextensions = array("jpeg", "jpg", "png");
$temporary = explode(".", $_FILES["file"]["name"]);
$file_extension = end($temporary);
if(in_array($file_extension, $validextensions))
{	
	if(move_uploaded_file($src, $targ))
	{
		echo "File Uploaded Successfully";
	}
	else
	{
		echo "Failed";
	}
}
else{
	echo "Only allowed jpeg,jpg and png extension";
}

?>

Please follow and like us:

Hope this code and post will helped you for implement Upload an image without a form submitting using ajax – onlinecode. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

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

6  +    =  14

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US