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();
}

?>

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

Newsletter subscription using PHP, Ajax, jQuery

Must Read : Newsletter subscription using PHP, Ajax, jQuery

Step 1: In our first step we create our database table to store user email address.
CREATE TABLE IF NOT EXISTS newsletter_signup (
email_id int(11) NOT NULL AUTO_INCREMENT,
email_address varchar(50) NOT NULL,
PRIMARY KEY (email_id)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

Setp 2: Now we create a subscription form where user put their email address. File name is index.php

Setp 3: Now we have to style our subscription form. So we create a style.css file for that

Step 4: Now we have to send user email address to a page. Here I use a js file to take email value from index.php and send the value using ajax post request to that page. So I create a addmail.js to do that.

Step 5: Now we create a connection file to connect php with mysql conn.php

Step 6: Now we create a php file which take the email value from addmail.js and insert the email address to our database table and return the status. So we create add_mail.php for that.

Step 7: In this file we fetch all email address from database table and show the list to administrator(just think). So we create list_email.php for that.

Ajax contact form using captcha validation

Must Read : Ajax contact form using captcha validation

Step 1: In this step I create contact form for user from where they will send contact to us

Step 2: In this setp I create a style.css for styling our form

Step 3: Now I create a send_mail.js for taking value after clicking “Send Mail” button. This js file take the value from the form , validate all fields and send all data to another php file using ajax post request

Step 4: Last step for our application. Here I create a email_send.php which takes all ajax post data, validate all data using php, if any error occurs, send it to the ajax file with error message. If all are ok then I send a success message to ajax file. I display the message using result id.

Ajax File Upload with Progress Bar

Must Read : Ajax File Upload with Progress Bar

Step1:Create html markup and include main js, jQuery Form Plugin js and custom js

At first when you view the html form upload button is initially disable. After upload an image it will enable and then you click on upload button. Here I write a simple jQuery for this. Ajax File Upload form is well commented so please read the comment. It will help you to integrate it with your website.

Step2: Create custom.js file

The file is well commented. I think you will understand all the code easily.

Step3: Create upload_file.php

Simply paste the below code into upload_file.php

Now you are done.