Upload Image without page reload using Jquery

Upload Image without page reload using Jquery

In this example i am going to share with you image uploading process using jQuery ajax, Yes by using this example you can upload your image/avatar using ajax without page re-load. This process will require few programming languages:

Using jQuery AJAX Image Upload

Here we go with :-

  • PHP
  • HTML
  • JQUERY AJAX

One more thing is there, which is the preview for the selected image is shown in the preview box before upload.

HTML form is:

<form enctype="multipart/form-data" id="uploadImage" >
            <div class="form-group">
            	 <img src="images/dummy_avatar_legend-blogs.png" id="targetImage" class="icon-choose-image" />
                 <input type="file" class="form-control" id="file" name="file" required />
            </div>
            <div class="statusMsg"></div>
            <input type="submit" name="submit" class="btn btn-danger" value="Upload"/>
</form>

Jquery code is:

$(document).ready(function(e){
	$("#file").change(function(){
		var objFileInput = this;
		if (objFileInput.files[0]) {
			var fileReader = new FileReader();
			fileReader.onload = function (e) {
				$('#blah').attr('src', e.target.result);
				$("#targetImage").attr("src",e.target.result);
				$("#targetImage").css('opacity','0.7');
			}
			fileReader.readAsDataURL(objFileInput.files[0]);
		}
	});
    $("#uploadImage").on('submit', function(e){
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'ajax_page.php',
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            beforeSend: function(){
                $('.btn').attr("disabled","disabled");
            },
            success: function(data){
                 $('.statusMsg').html('<span style="font-size:18px;color:#34A853">Your Image uploaded successfully.</span>');
				 $('#file').val("");
            },
			complete: function(){
				$('#targetImage').css("opacity","");
                $(".btn").removeAttr("disabled");
			},
			error: function (jqXHR, textStatus, errorThrown) {
			  $('.statusMsg').html('<span style="font-size:18px;color:#EA4335">Some problem occurred, please try again.</span>');
			} 
        });
    });
    
    $("#file").change(function() {
        var file = this.files[0];
        var imagefile = file.type;
        var match= ["image/jpeg","image/png","image/jpg"];
        if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2]))){
            alert('Please select a valid image like JPEG/JPG/PNG.');
            $("#file").val('');
            return false;
        }
    });
});

Output

Your Page will be like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Upload Image without page Re-load</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"> 
	<h2 class="text-danger">Upload Image without page Reload using ajax</h2>
     <div class="col-md-6 text-center">    
         <form enctype="multipart/form-data" id="uploadImage" >
            <div class="form-group">
            	 <img src="images/dummy_avatar_legend-blogs.png" id="targetImage" class="icon-choose-image" />
                 <input type="file" class="form-control" id="file" name="file" required />
            </div>
            <div class="statusMsg"></div>
            <input type="submit" name="submit" class="btn btn-danger" value="Upload"/>
        </form>
     </div>
</div>
</body>
</html>
<script>
$(document).ready(function(e){
	$("#file").change(function(){
		var objFileInput = this;
		if (objFileInput.files[0]) {
			var fileReader = new FileReader();
			fileReader.onload = function (e) {
				$('#blah').attr('src', e.target.result);
				$("#targetImage").attr("src",e.target.result);
				$("#targetImage").css('opacity','0.7');
			}
			fileReader.readAsDataURL(objFileInput.files[0]);
		}
	});
    $("#uploadImage").on('submit', function(e){
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'ajax_page.php',
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            beforeSend: function(){
                $('.btn').attr("disabled","disabled");
            },
            success: function(data){
                 $('.statusMsg').html('<span style="font-size:18px;color:#34A853">Your Image uploaded successfully.</span>');
				 $('#file').val("");
            },
			complete: function(){
				$('#targetImage').css("opacity","");
                $(".btn").removeAttr("disabled");
			},
			error: function (jqXHR, textStatus, errorThrown) {
			  $('.statusMsg').html('<span style="font-size:18px;color:#EA4335">Some problem occurred, please try again.</span>');
			} 
        });
    });
    
    $("#file").change(function() {
        var file = this.files[0];
        var imagefile = file.type;
        var match= ["image/jpeg","image/png","image/jpg"];
        if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2]))){
            alert('Please select a valid image like JPEG/JPG/PNG.');
            $("#file").val('');
            return false;
        }
    });
});
</script>

Ajax Page

<?php 
		if(!empty($_FILES["file"]["type"])){
			$fileName = time().'_'.$_FILES['file']['name'];
			$valid_extensions = array("jpeg", "jpg", "png");
			$temporary = explode(".", $_FILES["file"]["name"]);
			$file_extension = end($temporary);
			if((($_FILES["hard_file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/jpeg")) && in_array($file_extension, $valid_extensions)){
				$sourcePath = $_FILES['file']['tmp_name'];
				$targetPath = "images/".$fileName;
				if(move_uploaded_file($sourcePath,$targetPath)){
					echo "Uploaded!";
				}
			}
		}
?> 

Related posts

Write a comment