when you use AJAx in the right sense, it will improve the user experience largely. In this article, let use see how to upload image with ajax and add great experience. Showing preview without page refresh, showing the loader, adding preview with fade-in effect kind of minor feature additions to your image upload will help the user.

Following steps are pointed under this process (upload image with ajax) :

1.  Include jQuery library.

2.  HTML page with upload field.

3.  jQuery Ajax code.

3.  PHP script to store image.

HTML form to upload your image

This code shows a simple file input. On selecting the photo a transparent preview of the image will be displayed in the preview box. Then, this image will be uploaded to a folder. It shows a window overlay with a loader to represent that the image upload is in progress.


<form id="Ajaxform">
	<input type="file" name="ajax_file" id="Fileinput">
	<div class="img_preview">
		<div class="im_progress">
			<img class="loader_img" src="ajax-loader.gif">
		</div>
		<img src="" id="img_preview">
	</div>
	<div class="All_images"></div>
</form>

Apply some style to your form

This will add some necessary style into your form to make your html more user friendly.

.img_preview {
    width: 300px;
    position: relative;
    display: none;
}
img#img_preview {
    width: 100%;
}
.overlay{
	position: absolute;
    width: 100%;
    height: 100%;	
}
.im_progress {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
}
.loader_img{
    position: absolute;
    top: 50%;
    left: 50%;	
}

Javascript and ajax code

This script contains a jQuery function DisplayImagePreview(). It will be called when selecting the image file to be uploaded. This function is used to show a transparent preview of the selected image before upload.On selecting the file, it submits the form data to PHP via jQuery AJAX by ajaxFormSubmit().In PHP code, it uploads the image to the target folder and returns the json as an AJAX response.

$(document).on('change','#Fileinput',function(){
	var imgpreview=DisplayImagePreview(this);
	$(".img_preview").show();
	var url="process.php";
    ajaxFormSubmit(url,'#Ajaxform',function(output){
		var data=JSON.parse(output);
		if(data.status=='success'){
			$('.im_progress').fadeOut();
		}else{
			alert("Something went wrong.Please try again.");
			$(".img_preview").hide();
		}
    })	
});	
function DisplayImagePreview(input){
	console.log(input.files);
	if (input.files &amp;&amp; input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#img_preview').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}
function ajaxFormSubmit(url, form, callback) {
    var formData = new FormData($(form)[0]);
    $.ajax({
        url: url,
        type: 'POST',
        data: formData,
        datatype: 'json',
        beforeSend: function() {
            // do some loading options
        },
        success: function(data) {
            callback(data);
        },
 
        complete: function() {
            // success alerts
        },
 
        error: function(xhr, status, error) {
            alert(xhr.responseText);
        },
        cache: false,
        contentType: false,
        processData: false
 
    });
 
}

Finally the php upload function

PHP script stores the image in a defined location and returns the message of the success and failure of the process.

$dir="uploadedimage/";
if(isset($_FILES['ajax_file'])){
	$imge=$_FILES['ajax_file'];
	if($imge['size']<=10000000){ $destination=$dir.$imge['name']; $isuploaded=move_uploaded_file($imge['tmp_name'],$destination); if($isuploaded){ echo json_encode(array("status"=>"success","message"=>"File has been uploaded successfully"));
		}else{
			echo json_encode(array("status"=>"fail","message"=>"Some error to upload this file"));
		}
	}else{
		echo json_encode(array("status"=>"fail","message"=>"File size can't more than 1 MB"));
	}
}else{
	echo json_encode(array("status"=>"fail","message"=>"File size can't more than 1 MB"));
}
http://codingbin.com/wp-content/uploads/2017/09/Untitledmmmm.pnghttp://codingbin.com/wp-content/uploads/2017/09/Untitledmmmm-150x150.pngdevidajaxjavascriptjQueryajax,image upload,preview imagewhen you use AJAx in the right sense, it will improve the user experience largely. In this article, let use see how to upload image with ajax and add great experience. Showing preview without page refresh, showing the loader, adding preview with fade-in effect kind of minor feature additions...coding, php, wordpress, yii, cakephp, and  jquery

Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request