Il y a quelques jours, j’ai trouvé un excellent tutoriel en anglais sur un formulaire d’upload utilisant Ajax, jQuery et PHP permettant d’afficher une barre de progression.

Voici l’article original : https://www.sanwebe.com/2012/05/ajax-image-upload-with-progressbar-with-jquery-and-php.

Puis la version française ! =)

Aujourd’hui, nous allons créer un formulaire de téléchargement d’image ainsi qu’un script de redimensionnement pour ces dernières avec une barre de progression.

Les barres de progression nécessitent un navigateur récent qui supporte XMLHttpRequest 2. C’est une fonctionnalité d’HTML5 qui ajoute plus de fonctionnalités aux requêtes Ajax, de plus nous pouvons gérer la progression du transfert des données. Heuresement, tous les navigateurs modernes supportent cette fonctionnalité.

Formulaire HTML

Vous retrouverez ci-dessous le formulaire HTML.

<div class="form-wrap">
<h3>Ajax Image Uploader</h3>
    <form action="process.php" method="post" enctype="multipart/form-data" id="upload_form">
        <input name="__files[]" type="file" multiple />
        <input name="__submit__" type="submit" value="Upload"/>
    </form>
    <div id="progress-wrp"><div class="progress-bar"></div ><div class="status">0%</div></div>
    <div id="output"><!-- error or success results --></div>
</div>

Personnaliser la barre de progression avec CSS

#progress-wrp {
    border: 1px solid #0099CC;
    padding: 1px;
    position: relative;
    border-radius: 3px;
    margin: 10px;
    text-align: left;
    background: #fff;
    box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}
#progress-wrp .progress-bar{
    height: 20px;
    border-radius: 3px;
    background-color: #f39ac7;
    width: 0;
    box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}
#progress-wrp .status{
    top:3px;
    left:50%;
    position:absolute;
    display:inline-block;
    color: #000000;
}

jQuery

$.ajax({
    url : post_url,
    type: "POST",
    data : form_data,
    contentType: false,
    cache: false,
    processData:false,
    xhr: function(){
        //upload Progress
        var xhr = $.ajaxSettings.xhr();
        if (xhr.upload) {
            xhr.upload.addEventListener('progress', function(event) {
                var percent = 0;
                var position = event.loaded || event.position;
                var total = event.total;
                if (event.lengthComputable) {
                    percent = Math.ceil(position / total * 100);
                }
                //update progressbar
                $(progress_bar_id +" .progress-bar").css("width", + percent +"%");
                $(progress_bar_id + " .status").text(percent +"%");
            }, true);
        }
        return xhr;
    },
    mimeType:"multipart/form-data"
}).done(function(res){ //
    $(my_form_id)[0].reset(); //reset form
    $(result_output).html(res); //output response from server
    submit_btn.val("Upload").prop( "disabled", false); //enable submit button once ajax is done
});

Pour conclure

Lien pour la démo.

Lien pour télécharger le script.