Bouton upload sans submit ni zone de texte (AJAX)

Après avoir chercher sur différents forums et site pour réaliser cela, voici une synthèse qui fonctionne.

Ce bouton permet de faire un upload de fichier en cliquant sur un seul bouton => dès que le fichier est sélectionnés, il est envoyé en POST en ajax.

Partie Javascript:

 $('.Bimport').click(function(e){
       e.preventDefault();
       $('Input[name="fichiercsv"]').click();
   });

   $('Input[name="fichiercsv"]').change(function (){
       $("#formimportcsv").submit();
   });

   $("body").on('submit','#formimportcsv', function(e) {
       e.preventDefault();
       $.ajax({
           type: 'POST',
           url: "/importcsv",
           data: new FormData(this),
           contentType: false,
           cache: false,    
           processData:false,  
           success: function (retour) {
               alert(retour);
               window.location.reload();
           },
           dataType: "html"
       });
  });

Partie HTML:

<form class="form-inline" action="/importcsv" method="post" role="form" id="formimportcsv" enctype="multipart/form-data">
    <a class='btn btn-primary Bimport' href=''>Import fichier TXT</a>
    <input type="file" style='position:absolute;z-index:2;top:0;left:0;filter: alpha(opacity=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;background-color:transparent;color:transparent;' accept=".txt" name="fichiercsv" size="255">
</form>

 

Partie PHP (Laravel):

définir la route /importcsv » vers la fonction suivante:

public function importcsv(){
    $erreur="";

    if (!isset($_FILES["fichiercsv"])) {
         return "pas de réception de File";
    } else {

        if ($_FILES["fichiercsv"]["error"])
        {
            switch ($_FILES['fichiercsv']['error']){
                case 1: // UPLOAD_ERR_INI_SIZE
                     return "Le fichier dépasse la limite autorisée par le serveur (fichier php.ini) !";
                    break;
                case 2: // UPLOAD_ERR_FORM_SIZE
                     return "Le fichier dépasse la limite autorisée dans le formulaire HTML !";
                    break;
                case 3: // UPLOAD_ERR_PARTIAL
                     return "L'envoi du fichier a été interrompu pendant le transfert !";
                    break;
                case 4: // UPLOAD_ERR_NO_FILE
                     return "Le fichier que vous avez envoyé a une taille nulle !";
                    break;
            }

        }
        else {
            $typeautorises = Array('text/plain');
            if (!in_array($_FILES["fichiercsv"]["type"], $typeautorises)) {
                return 'Format non accepté';
            } else {
                if (!$_FILES["fichiercsv"]["name"]) {
                    return 'Nom de fichier vide';
                } else {
                    if ($_FILES["fichiercsv"]["size"] == 0) {
                        return 'Fichier reçu vide';
                    } else {
                    
                    // votre traitement ici

                    }

                }
            }
        }
    }
    return "Importation OK";
}

 

Explications:

  • Le champ input est invisible et le click du bouton affiché déclenche un click sur le champ caché.
  • Une fois le fichier choisi, l’évènement change déclenche la soumission du formulaire
  • La soumission est interceptée et envoyée en ajax.
  • La fonction PHP analyse la validité du fichier, puis exécute votre traitement.
  • Le texte renvoyé par la fonction PHP est affiché dans une boite d’alerte, puis la fenêtre html est réactualisée.

Laisser un commentaire