Ajax based instant image upload

by in , on

Image upload is simple to just select an image and click on the upload button that’s it. But it will be more effective when the selected image upload instanly means with out click on any upload button and you will see also the preview of that uploaded image.

All this will be more easy with ajax (asynchronous javaScript and xml) request. In this example we will use the ajax form plugin. I really thanks for this plugin because with the help of this plugin it will be more easy to make an ajax based instant image upload script.

Instant Image Upload


[buttons href=”http://webomnizz.com/demo/instant-image-upload/” title=”View Demo”]
Before making this image upload script, first we have to get the file extension to detect the exact file extension.

HTML section for image upload:

 

Please don’t forget to insert the jquery library, and the ajax form plugin before starting.

Attach AjaxForm plugin:

We are using .delegate() event handler, so that our event attached with the selector now or in the future. We have to use ‘change’ event in the .delegate() event handler, so that the attached event function work just after selecting the image or file. Now just attach the ajaxForm() with submit() event which automatically call to theform action="image_uploader.php"and pass the file data to the php file:

 

PHP file that handle the FORM data

Now we have to create a PHP file that handle the data sent from the ajaxForm() plugin, so just create a php file with the name “image_uploader.php”, you can give any name according to you that you have applied into your FORM’s action attribute.

First of all collect the name, size and the temporary name of the uploaded file, this is all what we to move a file from the temporary location to the main location. During the file upload, the uploaded file temporary stored in the /tmp directory of your server, with some automatically generated name and after that its automatically deleted. During this upload process we have to move that temporary file to our main location with the same name and extension.

So, first restrict your users to spamming or validate some necessary settings for your upload like: validate the file and there size and after that we are using the move_uploaded_file() PHP’s function to move the temporary file to the our given location.

 

  • Pingback: How to use AJAX in WordPress theme | WebOmnizz()

  • hohoo

    hi there, I started to studying this but kinda lost it. Can you provide a zip-ed files of this demo?

  • Guest

    this code has error

  • _IOIO_

    this code has error can’t be fixed

    • http://webomnizz.com/ Jogesh Sharma

      Hi @disqus_UjG0O7K00q:disqus , May i know what error you are getting during code execution time, because only highlighted the line in RED mark doesn’t mean ERROR. As i told in my post this is the simplest way to upload file with Ajax, you can modify it according to your need.

      As you can check the same code is working in demo section as well http://webomnizz.com/demo/instant-image-upload/

      • _IOIO_

        Hi

        After a long wrestling with the code, finally I have figured out that , when I copy paste the code there will be a white space behind each line and that’s a bug, will be resolved with a backspace , but the new issue I’m facing now is that the file won’t be parsed, still trying to figure it out, how to fix the issue.

      • _IOIO_

        the new issue is that no file is being parsed,

        $filename = $_FILES[“myfile”][“name”];

        $filesize = $_FILES[“myfile”][“size”];

        echo $tmp_name = $_FILES[“myfile”][“tmp_name”];

        // Valid extensions for Upload

        $validExtensions = array(‘jpeg’, ‘jpg’, ‘gif’, ‘png’, ‘JPG’);

        // Valid size in KB

        $max_size = 500;

        // Detect file extension

        echo $extension = strtolower(strrchr($filename, “.”));

        // Convert filesize in KB

        echo $getFileSize = round($filesize / 1024, 1);

        // Location to store the file

        $path = str_replace(‘/\’, ‘/’, dirname(__FILE__)) . “../upload/uploads/”;

        if( in_array ($extension, $validExtensions) ){

        if( $getFileSize >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>HTML

        as you see, there is no big change in your code, but nothing being parsed

        >>>>>>>>>>>>>>>>>>>>>>>>> here is the error

        $error_msg = “File not Supproted for Upload!

        Please try with the files that has following extensions: .jpg, .jpeg, .gif, .png, .JPG”;

        >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>PHP

        echo $tmp_name = $_FILES[“myfile”][“tmp_name”]; is showing 0; means nothing being parsed