lundi 1 août 2011

Comment intégrer un champ d'upload de fichier avec Jquery

1. Téléchargez et ajoutez les fichiers jquery.js et ajaxfileupload.js dans le < h ead> de votre page:
< s cript type="text/javascript" src="/js/jquery.js">< / script >
< s cript type="text/javascript" src="/js/ajaxfileupload.js">< / script >

2. creer la fonction jquery
  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;

    }  






Le code source complet est disponible ici : www.phpletter.com