About Me

My photo

I am Ram, a Web Designer and Developer.   More than 4  years of experience in software development. Created complex back-end management systems including content management, e-commerce, customer relations and communication interfaces. The projects based on PHP in conjunction. PHP, SQL, JavaScript, AJAX, XHTML, CSS (Responsive), I help people make beautiful websites, functional applications and seamless user experiences.

Tuesday, 13 September 2016

image upload using ajax php mysql

Demo - download

liberoram - image upload

Index.php

<html>
<head>
<title>Libero Ram | PHP AJAX Image Upload</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
    $("#uploadForm").on('submit',(function(e) {
        e.preventDefault();
        $.ajax({
            url: "upload.php",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(data)
            {
            $("#targetLayer").html(data);
            },
              error: function()
            {
            }            
       });
    }));
});

</script>
</head>
<body>
<div class="bgColor">
 <form id="uploadForm"  method="post">
<div id="targetLayer">No Image</div>
<div id="uploadFormLayer" >
<label>Upload Image File:</label><br/>
<input name="userImage" type="file" class="inputFile" />
<input type="submit" value="Submit" class="btnSubmit" />
</form>
</div>
</div>
</body>
</html>


Upload.php

<?php
if(is_array($_FILES)) {
if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {
$sourcePath = $_FILES['userImage']['tmp_name'];
$targetPath = "images/".$_FILES['userImage']['name'];
if(move_uploaded_file($sourcePath,$targetPath)) {
?>
<img src="<?php echo $targetPath; ?>" width="100px" height="100px" />
<?php
}
}
}
?>


Style.css

body {
font-family: Arial;
font-size: 14px;
}
.bgColor {
width: 440px;
height:100px;
background-color: #F9D735;
}
.bgColor label{
font-weight: bold;
color: #A0A0A0;
}
#targetLayer{
float:left;
text-align:center;
line-height:100px;
font-weight: bold;
color: #C0C0C0;
background-color: #F0E8E0;
overflow:hidden;
}
#targetLayer img{
        border: 0 none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}
#uploadFormLayer{
float:right;
padding: 10px;
}
.btnSubmit {
background-color: #3FA849;
padding:4px;
border: #3FA849 1px solid;
color: #FFFFFF;
}
.inputFile {
padding: 3px;
background-color: #FFFFFF;
}

Demo - download


No comments:

Post a Comment