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


Posted by at No comments:

Thursday, 1 September 2016

Table Sorting with jQuery Grid using PHP and MySQL

 

Click here to Download

Demo



Demo

Index.php

<div class="example ex-1">
<table>
<thead>
<tr>
<th>Name</th>
<th>Post</th>
<th>Date of Birth</th>
<th class="number">Age</th>
<th class="no-sort">Photo</th>
</tr>
</thead>
<tbody>
<tr>
<td>Libero Ram</td>
<td>Software Developer</td>
<td data-sort-value="2">Aug 15, 1991</td>
<td>26</td>
<td><img src="http://img.scoop.it/VPAC30TM-Tk_tmRBHKqlLTl72eJkfbmt4t8yenImKBVvK0kTmF0xjctABnaLJIm9" width="50"></td>
</tr>
<tr>
<td>Ram Kumar</td>
<td>Designer</td>
<td data-sort-value="4">may 01, 1992</td>
<td>28</td>
<th><img src="https://s-media-cache-ak0.pinimg.com/564x/1f/4b/ef/1f4bef480d10f159c1a8f317a432da0b.jpg" width="50"></td>
</tr>
<tr>
<td>Libero</td>
<td>Php Developer</td>
<td data-sort-value="1">June 18, 1942</td>
<td>24</td>
<td><img src="http://d13pix9kaak6wt.cloudfront.net/background/users/l/i/b/liberoram_1409038556_33.jpg" width="50"></td>
</tr>
<tr>
<td>Ram</td>
<td>Testing</td>
<td data-sort-value="3">July 26, 1974</td>
<td>22</td>
<td><img src="https://liberoram.files.wordpress.com/2014/12/liberoram.png" width="50"></td>
</tr>
</tbody>
</table></div>
 
</div>

Java Script

<script   src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="jquery.tablesort.min.js"></ script>
<script type="text/javascript">

$(function() {
$('table').tablesort().data('tablesort');

$('thead th.number').data('sortBy', function(th, td, sorter) {
return parseInt(td.text(), 10);
});

});
</script>

Style.css

<style type="text/css">
body {
font: normal 14px/21px Arial, serif;
}
.example {
float: left;
width: 40%;
margin: 5%;
}
table {
font-size: 1em;
border-collapse: collapse;
margin: 0 auto;
}
table, th, td {
border: 1px solid #999;
padding: 8px 16px;
text-align: left;
}

th {
background: #f4f4f4;
cursor: pointer;
}

th:hover,
th.sorted {
background: #d4d4d4;
}

th.no-sort,
th.no-sort:hover {
background: #f4f4f4;
cursor: not-allowed;
}

th.sorted.ascending:after {
content: "  \2191";
}

th.sorted.descending:after {
content: " \2193";
}

.disabled {
opacity: 0.5;
}
</style>

Click here to Download

Posted by at No comments:

Table Sorting with jQuery Grid using PHP and MySQL

 

Click here to Download

Demo

Index.php

<div class="example ex-1">
<table>
<thead>
<tr>
<th>Name</th>
<th>Post</th>
<th>Date of Birth</th>
<th class="number">Age</th>
<th class="no-sort">Photo</th>
</tr>
</thead>
<tbody>
<tr>
<td>Libero Ram</td>
<td>Software Developer</td>
<td data-sort-value="2">Aug 15, 1991</td>
<td>26</td>
<td><img src="http://img.scoop.it/VPAC30TM-Tk_tmRBHKqlLTl72eJkfbmt4t8yenImKBVvK0kTmF0xjctABnaLJIm9" width="50"></td>
</tr>
<tr>
<td>Ram Kumar</td>
<td>Designer</td>
<td data-sort-value="4">may 01, 1992</td>
<td>28</td>
<th><img src="https://s-media-cache-ak0.pinimg.com/564x/1f/4b/ef/1f4bef480d10f159c1a8f317a432da0b.jpg" width="50"></td>
</tr>
<tr>
<td>Libero</td>
<td>Php Developer</td>
<td data-sort-value="1">June 18, 1942</td>
<td>24</td>
<td><img src="http://d13pix9kaak6wt.cloudfront.net/background/users/l/i/b/liberoram_1409038556_33.jpg" width="50"></td>
</tr>
<tr>
<td>Ram</td>
<td>Testing</td>
<td data-sort-value="3">July 26, 1974</td>
<td>22</td>
<td><img src="https://liberoram.files.wordpress.com/2014/12/liberoram.png" width="50"></td>
</tr>
</tbody>
</table></div>
 
</div>

Java Script

<script   src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="jquery.tablesort.min.js"></ script>
<script type="text/javascript">

$(function() {
$('table').tablesort().data('tablesort');

$('thead th.number').data('sortBy', function(th, td, sorter) {
return parseInt(td.text(), 10);
});

});
</script>

Style.css

<style type="text/css">
body {
font: normal 14px/21px Arial, serif;
}
.example {
float: left;
width: 40%;
margin: 5%;
}
table {
font-size: 1em;
border-collapse: collapse;
margin: 0 auto;
}
table, th, td {
border: 1px solid #999;
padding: 8px 16px;
text-align: left;
}

th {
background: #f4f4f4;
cursor: pointer;
}

th:hover,
th.sorted {
background: #d4d4d4;
}

th.no-sort,
th.no-sort:hover {
background: #f4f4f4;
cursor: not-allowed;
}

th.sorted.ascending:after {
content: "  \2191";
}

th.sorted.descending:after {
content: " \2193";
}

.disabled {
opacity: 0.5;
}
</style>

Click here to Download

Posted by at No comments:
Subscribe to: Posts (Atom)