jQuery Ajax File Upload Without Page Refresh in PHP

This is a very simple script used to upload single image file without page refresh using jQuery, Ajax and PHP. Here the user have option to set upload file format and set maximum file size. You need two jQuery files jquery.js and jquery.form.js to run this script.

Include .js  Files

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

Create the HTML Form


<form class="uploadform" method="post" enctype="multipart/form-data" action='upload.php'>
Upload your image <input type="file" name="imagefile" />
<input type="submit" value="Submit" name="submitbtn" id="submitbtn">
</form>

<!-- The uploaded image will display here -->

<div id='viewimage'></div>

Create the HTML Form

<script type="text/javascript" >
$(document).ready(function() {
$('#submitbtn').click(function() {
$("#viewimage").html('');
$("#viewimage").html('<img src="img/loading.gif" />');
$(".uploadform").ajaxForm({
target: '#viewimage'
}).submit();
});
});
</script>

PHP File upload script

<?php
$file_formats = array("jpg", "png", "gif", "bmp"); // Set File format
$filepath = "upload_images/";

if ($_POST['submitbtn']=="Submit") {
  $name = $_FILES['imagefile']['name'];
  $size = $_FILES['imagefile']['size'];

   if (strlen($name)) {
      $extension = substr($name, strrpos($name, '.')+1);
      if (in_array($extension, $file_formats)) { 
          if ($size < (2048 * 1024)) {
             $imagename = md5(uniqid().time()).".".$extension;
             $tmp = $_FILES['imagefile']['tmp_name'];
             if (move_uploaded_file($tmp, $filepath . $imagename)) {
		 echo '<img class="preview" alt="" src="'.$filepath.'/'. $imagename .'" />';
	     } else {
		 echo "Could not move the file.";
	     }
	  } else {
		echo "Your image size is bigger than 2MB.";
	  }
       } else {
	       echo "Invalid file format.";
       }
  } else {
       echo "Please select image..!";
  }
exit();
}

?>

Bootstrap modal – disable closing with ESC key or mouse

Must Read : Bootstrap modal – disable closing with ESC key or mouse

With Twitter Bootstrap modals in either version 2 or 3, you can easily prevent the modal window from being closed with the escape key or by clicking on the black backdrop outside the window.

This is useful for keeping people inside of a wizard or other multi-step process inside of a modal box.

Disable the keyboard (ESC key) and mouse clicks outside window

Adding the attributes of data-keyboard="false" and data-backdrop="static" to your modal div will keep the escape key from closing the window.

Add to HTML element

OR control with JavaScript

Check uncheck multiple checkboxes using Javascript

Must Read : Check uncheck multiple checkboxes using Javascript

Here’s a useful Javascript function I recently coded to allow a list of checkboxes in a form to be selected or unselected. The CheckAll function takes in two parameters, the first is the form name and the second is a boolean value – true or false, true being to select all checkboxes and false to un-select all.

Javascript function to handle the main logic

The above code is finish here but this is not the end. Now I show you another way to select group of check boxes

Check uncheck Gmail-like Grouped checkboxes using jQuery

This script will not select all the check boxes using a single but but this will give you a chance to select group of check boxes.

I create the above two application in one page.

Show hide password jquery script

Must Read : Show hide password jquery script

Step1: Create the html markup for input type password

In this html markup I include two js file one is jQuery main library(jquery-1.11.1.min.js) and another is function.js.

Step2: Create function.js file

That’s all. Now you learn how to Show hide password using jQuery. You can use this application with any form.

Auto suggestion using Ajax, jQuery and PHP

Must Read : Auto suggestion using Ajax, jQuery and PHP

Step 1: Creating database table for auto suggestion application
CREATE TABLE IF NOT EXISTS autosuggession (
user_id int(11) NOT NULL AUTO_INCREMENT,
username varchar(50) NOT NULL,
PRIMARY KEY (user_id )
);

Now we insert some row in our table
INSERT INTO autosuggession (user_id, username) VALUES (NULL, ‘De Gea’), (NULL, ‘Rafael’), (NULL, ‘Shaw ‘), (NULL, ‘Jones’), (NULL, ‘Rojo’), (NULL, ‘Evans’), (NULL, ‘Di Maria’), (NULL, ‘Mata’), (NULL, ‘Falcao’), (NULL, ‘Rooney’), (NULL, ‘Januzaj’), (NULL, ‘Smalling’), (NULL, ‘Lindegaard’), (NULL, ‘Hernandez’), (NULL, ‘Carrick’), (NULL, ‘Herrera’), (NULL, ‘Henriquez’), (NULL, ‘Valencia’);

Step2: Creating view file index.php for auto suggestion(You can give any name)

Step 3: Create style.css

Step 4: Now create autosuggestion.js file

Step 5: Create search.php for ajax request

 

Username availability checking using Ajax

Must Read : Username availability checking using Ajax

Step 1: Creating database table for username availability checking and insert some data
CREATE TABLE IF NOT EXISTS user_information (
id int(11) NOT NULL AUTO_INCREMENT,
username varchar(255) NOT NULL,
email varchar(255) NOT NULL,
password varchar(255) NOT NULL,
PRIMARY KEY (id),
UNIQUE KEY email (email)
)

INSERT INTO user_information (id, username, email, password) VALUES
(1, ‘admin’, ‘admin@admin.com’, ‘12345’),
(2, ‘admin123’, ‘admin123@admin.com’, ‘12345’),
(3, ‘wearecoders’, ‘info@wearecoders.net’, ‘12345’);

Step2: Now we Creating our view file index.php. This file will show a html form.

Step 3: Create style.css for styling our view file

Step 4: Now create usernamevalid.js file. This file will take value from the form and using ajax we show the availability message to the user.

Step 5: Create the connection file conn.php to create php with mysql

Step 6: Create user_valid.php for username availability checking. This file receive the ajax post request for username and check if the username already exist or not

Step 6: Create email_valid.php for email address availability checking. This file receive the ajax post request for email address and check if the emailalready exist or not