Image Upload Without Refreshing Page Using JQUERY, PHP & MYSQL

Image Upload Without Refreshing Page Using JQUERY, PHP & MYSQL

Live picture transfer highlight makes web application more easy to use. With the live transfer, the client can choose and transfer pictures without page invigorate. Likewise, once the picture is transferred the see demonstrates the client which refreshes picture without a route to another page. You can execute live picture transfer include with jQuery without utilizing Ajax or any module.

The live picture transfer is extremely valuable in client board to refresh profile picture. In this instructional exercise, we will demonstrate the live picture transfer and client profile picture refresh usefulness. You’ll figure out how to transfer and refresh picture without page invigorate utilizing jQuery, PHP, and MySQL.

In our case script, we’ll get a specific client information from the MySQL database and demonstrate the client points of interest on the site page. The client can change the profile picture without page revive and their profile picture will be refreshed in the database in a split second.

Live Demo   Download Source Code

Index.php

<?php
//Include database configuration file
include_once 'dbConfig.php';

//Get current user ID from session
$userId = 1;

//Get user data from database
$result = $db->query("SELECT * FROM users WHERE id = $userId");
$row = $result->fetch_assoc();

//User profile picture
$userPicture = !empty($row['picture'])?$row['picture']:'no-image.png';
$userPictureURL = 'uploads/images/'.$userPicture;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Upload Without Refreshing Page Using  JQUERY, PHP & MYSQL</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    //If image edit link is clicked
    $(".editLink").on('click', function(e){
        e.preventDefault();
        $("#fileInput:hidden").trigger('click');
    });
	
    //On select file to upload
    $("#fileInput").on('change', function(){
        var image = $('#fileInput').val();
        var img_ex = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
		
		//validate file type
        if(!img_ex.exec(image)){
            alert('Please upload only .jpg/.jpeg/.png/.gif file.');
            $('#fileInput').val('');
            return false;
        }else{
            $('.uploadProcess').show();
            $('#uploadForm').hide();
            $( "#picUploadForm" ).submit();
        }
    });
});

//After completion of image upload process
function completeUpload(success, fileName) {
	if(success == 1){
		$('#imagePreview').attr("src", "");
		$('#imagePreview').attr("src", fileName);
		$('#fileInput').attr("value", fileName);
		$('.uploadProcess').hide();
	}else{
		$('.uploadProcess').hide();
		alert('There was an error during file upload!');
	}
	return true;
}
</script>    
</head>
<body>
<div class="container">
	<h3 style="text-align: center;text-transform: uppercase;font-size: 22px;">Image Upload Without Refreshing Page Using  JQUERY, PHP & MYSQL</h3>
    <div class="user-box">
        <div class="img-relative">
			<!-- Loading image -->
			<div class="overlay uploadProcess" style="display: none;">
				<div class="overlay-content"><img src="images/loading.gif"/></div>
			</div>
			<!-- Hidden upload form -->
			<form method="post" action="upload.php" enctype="multipart/form-data" id="picUploadForm" target="uploadTarget">
				<input type="file" name="picture" id="fileInput"  style="display:none"/>
			</form>
			<iframe id="uploadTarget" name="uploadTarget" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
			<!-- Image update link -->
			<a class="editLink" href="javascript:void(0);"><img src="images/edit.png"/></a>
			<!-- Profile image -->
			<img src="<?php echo $userPictureURL; ?>" id="imagePreview">
        </div>
        <div class="name">
            <h4><?php echo $row['name']; ?></h3>
        </div>
    </div>
</div>
</body>
</html>

Style.css

.container{width: 100%;}
.user-box {
    width: 300px;
    border-radius: 0 0 3px 3px;
    padding: 10px;
    position: relative;
}
.user-box .name {
    word-break: break-all;
    padding: 10px 10px 10px 10px;
    background: #0091f9;
    text-align: center;
    font-size: 25px;
	font-family:fantasy;
}
.user-box form{display: inline;}
.user-box .name h4{margin: 0;}
.user-box img#imagePreview{width: 100%;}

.editLink {
    position:absolute;
    top:28px;
    right:10px;
    opacity:0;
    transition: all 0.3s ease-in-out 0s;
    -mox-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    background:rgba(255,255,255,0.2);
}
.img-relative:hover .editLink{opacity:1;}
.overlay{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: rgba(255,255,255,0.7);
}
.overlay-content {
    position: absolute;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    color: #555;
}
.uploadProcess img{
    max-width: 207px;
    border: none;
    box-shadow: none;
    -webkit-border-radius: 0;
    display: inline;
}

Upload.php

<?php
if(!empty($_FILES['picture']['name'])){
    //Include database configuration file
    include_once 'dbConfig.php';
    
    //File uplaod configuration
    $result = 0;
    $uploadDir = "uploads/images/";
    $fileName = time().'_'.basename($_FILES['picture']['name']);
    $targetPath = $uploadDir. $fileName;
    
    //Upload file to server
    if(@move_uploaded_file($_FILES['picture']['tmp_name'], $targetPath)){
        //Get current user ID from session
        $userId = 1;
        
        //Update picture name in the database
        $update = $db->query("UPDATE users SET picture = '".$fileName."' WHERE id = $userId");
        
        //Update status
        if($update){
            $result = 1;
        }
    }
    
    //Load JavaScript function to show the upload status
    echo '<script type="text/javascript">window.top.window.completeUpload(' . $result . ',\'' . $targetPath . '\');</script>  ';
}

 

 

You May Also Like

About the Author: admin

1 Comment

Leave a Reply

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