that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages.

This AjaxFileUpload Plugin is a hacked version of Ajaxupload plugin created by yvind Saltvik, which is really good enought for normal use. Its idea is to create a iframe and submit the specified form to it for further processing.

In this hacked version, it submits the specified file type of input element only rather than an entire form

How to use it?

1. include jquery.js & ajaxfileupload.js javascript files
2. create a function to be fired when the upload button clicked.
e.g.

    function ajaxFileUpload()
    {
        //starting setting some animation when the ajax starts and completes
        $("#loading")
        .ajaxStart(function(){
            $(this).show();
        })
        .ajaxComplete(function(){
            $(this).hide();
        });

        /*
            prepareing ajax file upload
            url: the url of script file handling the uploaded files
                        fileElementId: the file type of input element id and it will be the index of  $_FILES Array()
            dataType: it support json, xml
            secureuri:use secure protocol
            success: call back function when the ajax complete
            error: callback function when the ajax failed

                */
        $.ajaxFileUpload
        (
            {
                url:'doajaxfileupload.php',
                secureuri:false,
                fileElementId:'fileToUpload',
                dataType: 'json',
                success: function (data, status)
                {
                    if(typeof(data.error) != 'undefined')
                    {
                        if(data.error != '')
                        {
                            alert(data.error);
                        }else
                        {
                            alert(data.msg);
                        }
                    }
                },
                error: function (data, status, e)
                {
                    alert(e);
                }
            }
        )

        return false;

    }  

Demo: http://www.phpletter.com/Demo/AjaxFileUpload-Demo/

Download: http://www.phpletter.com/download_project_version.php?version_id=6

Source: http://www.phpletter.com/Our-Projects/AjaxFileUpload/

Related Listings:

1. Multiple File Upload – JQuery The Multiple File Upload Plugin (jQuery.MultiFile) is a non-obstrusive plugin...
2. Ajax Style File upload for .Net If you visit Asp.net Ajax Forum, you will find hundreds...
3. uploadify – A file upload plugin using jQuery This plugin allows you to change any element with an...
4. Asynchronous upload – Like AJAX Here a simple function to asynchronous upload using iframe. Dont...
5. Multiple file upload – Moo tools It’s about 18 months since I released my simple script...

Do you like this post?

Email: