JQUERY

File Upload in Jquery

Download: jquery file upload

index.php:

<div class="container">
    <div class="page-header">
        <h1>jQuery File Upload</h1>
    </div>
     <br>
  <form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data">
        
        <div class="row fileupload-buttonbar">
            <div class="span7">
                <span class="btn btn-success fileinput-button">
                    <i class="icon-plus icon-white"></i>
                    <span>Add files...</span>
                    <input type="file" name="files[]" multiple>
                </span>
                <button type="submit" class="btn btn-primary start">
                    <i class="icon-upload icon-white"></i>
                    <span>Start upload</span>
                </button>
                <button type="reset" class="btn btn-warning cancel">
                    <i class="icon-ban-circle icon-white"></i>
                    <span>Cancel upload</span>
                </button>
                <button type="button" class="btn btn-danger delete">
                    <i class="icon-trash icon-white"></i>
                    <span>Delete</span>
                </button>
                <input type="checkbox" class="toggle">
            </div>
            <div class="span5 fileupload-progress fade">
                <div class="progress progress-success progress-striped active"

 role="progressbar" aria-valuemin="0" aria-valuemax="100">
                    <div class="bar" style="width:0%;"></div>
                </div>
                <div class="progress-extended">&nbsp;</div>
            </div>
        </div>
        <div class="fileupload-loading"></div>
        <br>
<table role="presentation" class="table table-striped">

<tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery">

</tbody></table>

    </form>
    <br>
</div>

Validation for username&Password

  Download Js          

index.php:

<form class="form-wrapper" method="post">
<div align="center"><p style="margin-right:186px;">Username<span style="color:red;">*</span></p><input type="text" class="search" name="username" required="required" id="username" autocomplete="off" onblur="checkUserName(this.value)"/>
<p style="margin-right:70px;"><span id="usercheck"></span></p></div>
 <p>&nbsp;</p>
<div align="center"><p style="margin-right:150px;">Create Password<span style="color:red;">*</span></p><input type="password" class="search" autocomplete="off" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{6,}" name="pwd1" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Password must contain at least6 characters, including UPPER/lowercase and numbers' : '');if(this.checkValidity()) form.pwd2.pattern = this.value;
"></p></div>
<p>&nbsp;</p>
<div align="center"><p style="margin-right:150px;">Verifed Password<span style="color:red;">*</span></p> 
<input type="password" class="search" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{6,}" name="pwd2" onchange="
  this.setCustomValidity(this.validity.patternMismatch ? 'Please enter the same Password as above' : '');
"></p>  </div><p align="center"> <input type="submit" class="submit" value="Sign up"  name="submit"></p>
 </form>

username.php:

<?php 
$query=mysql_connect("localhost","root","");
mysql_select_db("reg_ajax",$query);
$arr_user=array("itechroom", "trialuser");
$username=$_POST['user_name'];


if(in_array($username,$arr_user)) 
{echo '<span class="error">Username already exists.</span>';exit;}

else if(strlen($username) < 6 || strlen($username) > 15)
{
echo '<span class="error">Username must be 6 to 15 characters</span>';}
else if (preg_match("/^[a-zA-Z1-9]+$/", $username)) 
{
       echo '<span class="success">Username is available.</span>';
} 
else 
{
      echo '<span class="error">Use alphanumeric characters only.</span>';
}

?>

Script:

function checkUserName(usercheck)

{
    $('#usercheck').html('<img src="images.gif" />');
    $.post("username.php", {user_name: usercheck} , function(data)
        {           
               if (data != '' || data != undefined || data != null) 
               {                   
                  $('#usercheck').html(data);   
               }
          });
}