Archive

February 2016

Browsing

Remember Me functionality using HTML5 & jquery

Remember Me functionality using HTML5 & jquery

Html5 updated lot of new features and functionalities. The most one of the html5 is local storage option. Its like a cookies storage in php session, using  cookies we can stored few amount of data in browser but using local storage u can stored lot of data’s in user browser.  Its features helps to solve many complex problems and a better way to solve functionality which generally takes much time with older methods. One of the best feature in HTML5 is support for Web Storage. This has helped many of the developers in many different ways, for storing temporary data storage.One of the example is given below. Here is a simple example of “Remember Me” functionality on Login /Sign in form using HTML5 Web storage and jQuery.

So using local storage we are learn Remember Me functionality using HTML5 & jquery

        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script>
            $(function() {

                if (localStorage.chkbx && localStorage.chkbx != '') {
                    $('#remember_me').attr('checked', 'checked');
                    $('#username').val(localStorage.usrname);
                    $('#pass').val(localStorage.pass);
                } else {
                    $('#remember_me').removeAttr('checked');
                    $('#username').val('');
                    $('#pass').val('');
                }

                $('#remember_me').click(function() {

                    if ($('#remember_me').is(':checked')) {
                        // save username and password
                        localStorage.usrname = $('#username').val();
                        localStorage.pass = $('#pass').val();
                        localStorage.chkbx = $('#remember_me').val();
                    } else {
                        localStorage.usrname = '';
                        localStorage.pass = '';
                        localStorage.chkbx = '';
                    }
                });
            });

        </script>
        
        <div class="container">
            <form class="form-signin">
                <h2 class="form-signin-heading">Please sign in</h2>
                <input type="text" class="input-block-level" placeholder="Email address" id='username'>
                <input type="password" class="input-block-level" placeholder="Password" id="pass">
                <label class="checkbox">
                    <input type="checkbox" value="remember-me" id="remember_me"> Remember me
                </label>
                <button class="btn btn-large btn-primary" type="submit">Sign in</button>
            </form>
        </div>

This is the simple functionality for using remember me function in html5

File upload with Progress bar using ajax

File upload with Progress bar using ajax

In this tutorials, we are going to learn how to file upload with progress bar using ajax.  Nowadays there are lot of upload portals and upload websites there. so if we working for websites definitely we have one form with upload images and content. So while we create for user interface is more important in design. Every user wants to upload the big file and look how much time take for upload using progress bar.

This is tutorials for File upload with Progress bar using ajax. now going to the coding part.

Step 1 : Create upload form with file upload input type and named as upload.html or php

<div class="custom_file_upload">
<h3>File Upload Demo</h3>
<form id="myForm" action="upload_file.php" method="post" enctype="multipart/form-data">
     <input id="file" type="file" size="60" class="file" name="file">
    <div class="submit"> <input id="submit" type="submit" value="Upload" disabled="disabled"> </div>
 </form>
<!--- Below code will show the progress bar wirh percentage when user click Upload button-->
 <div id="progress" class="hide">
        <div id="bar"></div>
        <div id="percent">0%</div >
</div>
<br/>

<!-- Below code will show the upload status message -->
<div id="message"></div>
</div>

Step 2 : Create css style for for and named as style.css

body {
	font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
	font-size: 13px;
}

div.custom_file_upload {
	width: 230px;
	height: 20px;
	margin: 40px auto;
}

input.file {
	width: 150px;
	height: 20px;
	border: 1px solid #BBB;
	border-right: 0;
	color: #888;
	padding: 5px;
	
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	
	outline: none;
}

div.submit {
	width: 80px;
	height: 24px;
	background: #7abcff;
	background: -moz-linear-gradient(top,  #7abcff 0%, #60abf8 44%, #4096ee 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee));
	background: -webkit-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%);
	background: -o-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%);
	background: -ms-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%);
	background: linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 );

	display: inline;
	position: absolute;
	overflow: hidden;
	cursor: pointer;
	
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	
	font-weight: bold;
	color: #FFF;
	text-align: center;
	padding-top: 8px;
}
div.submit:before {
	content: 'UPLOAD';
	position: absolute;
	left: 0; right: 0;
	text-align: center;
	
	cursor: pointer;
}

div.submit input {
	position: relative;
	height: 30px;
	width: 250px;
	display: inline;
	cursor: pointer;
	opacity: 0;
}

form { display: block; margin: 20px auto; background: #eee; border-radius: 10px;  }
#progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
#bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
#percent { position:absolute; display:inline-block; top:3px; left:48%; }
.hide{display:none;}

Step 3 : create php upload file for create upload folder(directory) where to upload file in location

<?php  
if(isset($_FILES["file"]))
{ 
	 //You can validate the file type, size here. I left the code for you 
	 if ($_FILES["file"]["error"] > 0) 
	 { 
	   echo "Error: " . $_FILES["file"]["error"]; 
	 } 
	 else 
	 { 
	 
	  move_uploaded_file($_FILES["file"]["tmp_name"],'upload/'. $_FILES["file"]["name"]);   
	  echo "Uploaded File :".$_FILES["file"]["name"]; 
	 } 
} 

?>

Step 4: Create JavaScript function for  progress bar option.

$(document).ready(function()
{
	//Enable Upload button
	$('#file').change(function(){
		$('#submit').removeAttr('disabled');
	});
	//Show the progress bat after upload button hit
	$('#submit').change(function(){
		$('#progress').removeClass('hide');
	});
	
	//We can even provide options to ajaxForm to get callbacks like success,error, uploadProgress and beforeSend
    var options = {
	//beforeSend : this function called before form submission
    beforeSend: function()
    {
        $("#progress").show();
        //clear everything
        $("#bar").width('0%');
        $("#message").html("");
        $("#percent").html("0%");
    },
	//uploadProgress : this function called when the upload is in progress
    uploadProgress: function(event, position, total, percentComplete)
    {
        $("#bar").width(percentComplete+'%');
        $("#percent").html(percentComplete+'%');

    },
	//success : this function is called when the form upload is successful.
    success: function()
    {
        $("#bar").width('100%');
        $("#percent").html('100%');

    },
	//complete: this function is called when the form upload is completed.
    complete: function(response)
    {
        $("#message").html("<font color='green'>"+response.responseText+"</font>");
    },
    error: function()
    {
        $("#message").html("<font color='red'> ERROR: unable to upload files</font>");

    }

};
	////where myForm is the form id
     $("#myForm").ajaxForm(options);

});

Step 5 :  create folder in your file directory named as upload.

Thats it. now you can upload a file with progress bar. enjoy the code and subscribe me.