Ajax image upload without form submit and without page refresh

If You are looking for upload an image without submitting the form and with out refresh the page using jQuery, then this tutorial will usefull for you. I had implemented this ajax image upload program using 'ajaxfileupload' plugin, 'jquery' and PHP code for uploading images. By using following code you can upload image to the server. Click here to download "Ajax Image Upload" code.

Step 1:

Include Jquery plugin and ajaxfileupload plugin You can these plugins here. Example:

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

Step 2:

Create form and input type 'file' and call a user defined function (showPreviewImage()) onchange action of that input type file. Example:

  

<form action="index.php" method="post" enctype="multipart/form-data">
  <input type="file" name="photo" id="photo" onchange="showPreviewImage('photo')" /><br />
  <span id="loader" style="display:none;"><img src="spinner.gif"></span>
  <div id="preview"></div>
 </form>


  

Step 3:

This is the important step.Create a function e.g showPreviewImage() this function will fired on chage of input type file . Here we will call a php file using jquery ajax e.g (upload.php) and write php image upload code there. Example:

 function showPreviewImage(imgId){                               
 $('#loader').show();
 var imgName=$('#photo').val();
 prevUrl="upload.php"      
 $.ajaxFileUpload({
  url:prevUrl,
  secureuri:false,
  fileElementId:imgId,
  dataType: 'json',
  complete: function (data, status){
   var z=data.responseText.replace(new RegExp("

"),'');
    if(z.indexOf('.')>0){
     $('#loader').hide();
     $("#preview").html("<img src='images/"+z+"' width='100'>");
   }else{
    $('#loader').hide();
    $("#preview").html(z);
   }    
  }                                  
 }); 
}

To get complete code click here.

Custom Database Table with image upload plugin for wordpress

In this plugin we'll be looking at creating custom database tables and insert data into that table with custom image upload functionality . We'll cover how to create, maintain and remove the table, as well as how to safely, and efficiently, add, remove and query data along with custom image uploaded functionality.

WordPress provides "$wpdb" class using that we can interact with database like creating , maintain custom tables ,fetch data and insert data into database. 

  Download Custom Table Example.

Create Custom Table

function custom_table_example_install()
{
    global $wpdb;
    global $custom_table_example_db_version;

    $table_name = $wpdb->prefix . 'cte'; 

    
    $sql = "CREATE TABLE " . $table_name . " (
      id int(11) NOT NULL AUTO_INCREMENT,
      name tinytext NOT NULL,
      email VARCHAR(100) NOT NULL,
   image VARCHAR(255) NULL,
      age int(11) NULL,
      PRIMARY KEY  (id)
    );";

    // we do not execute sql directly
    // we are calling dbDelta which cant migrate database
    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql);

    // save current database version for later use (on upgrade)
    add_option('custom_table_example_db_version', $custom_table_example_db_version);
}
register_activation_hook(__FILE__, 'custom_table_example_install');

In the above code we create a function says "custom_table_example_install()" and call this function at the time of activation of the plugin by the help of "register_activation_hook()". In "custom_table_example_install()" function we declare sql query and exaecute that query by using "dbDelta()" .

When write sql to create your table remember following points:

• each field MUST be in separate line
• There must be two spaces between PRIMARY KEY and its name
  Like this: PRIMARY KEY[space][space](id)
  otherwise dbDelta will not work

After creating the database table we define "defining the custom table list".In this part we are define custom table list class,that will display our database records in nice looking table .

For download this plugin Click here.

Jquery Add More Input fields

These days a very frequent requirement from customers is to have input fields dynamically added to a form while typing in it. This should happen without refreshing the page because the user shouldn't be submitting the form before all their information is completed. Here  is a simple example of such interface.


If you are looking to add and remove more input fields, here’s a jQuery example below to do the task for you. This jQuery snippet adds more input fields dynamically with the validation .

Here we start with 1 row of  input field and let user add more fields . Same process goes to delete button, when clicked, it removes current text field by removing the parent element, which is '<tr>' (you can use <div> also) element.

We start with single row of  Input fields and a “Add more ” link to allow user to add more fields with blank validation. The text input field is wrapped in '<tr>' element, as explained above, on 'delete' link click, it finds parent element, which is '<tr>' and removes it.

Download Code Here