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!";
}
}
}
?>
Write a comment