Plugin jQuery pour l'Upload Asynchrone avec ajaxFileUpload

ajaxFileUpload est un plugin jQuery qui permet d'envoyer des fichiers au serveur de manière asynchrone via AJAX.

Syntaxe et paramètres

La syntaxe générale est $.ajaxFileUpload([options]). Les options disponibles incluent :

url : Chemin vers le script serveur qui gère la réception du fichier.
fileElementId : Identifiant de l'élément <input type="file"> concerné.
secureuri : Indique si une connexion sécurisée est requise (défaut : false).
dataType : Format de la réponse attendue (xml, script, json, html). Si omis, jQuery tente une détection automatique.
succsess : Fonction de rappel invoquée après une réponse positive du serveur, avec les données en paramètre.
error : Fonction de rappel en cas d'échec de la requête.
data : Objet contenant des paramètres supplémentaires à transmettre avec le fichier.
type : Doit être défini sur "post" lorsque des paramètres personnalisés sont envoyés via l'option data.

Débogage des erreurs courantes

Plusieurs erreurs JavaScript peuvent survenir lorrs de l'utilisation :

SyntaxError: missing ; before statement : Vérifier que l'URL du script est accessible.
SyntaxError: syntax error : Contrôler le code côté serveur pour des fautes de syntaxe.
SyntaxError: invalid property id : S'assurer que l'ID de l'élément fichier existe dans le DOM.
SyntaxError: missing } in XML expression : Vérifier la cohérence du nom de fichier envoyé.
Pour d'autres problèmes, utiliser la varible $error pour afficher les valeurs des paramètres et faciliter l'identification des erreurs.

Implémentation étape par étape

Étape 1 : Intégration des fichiers JavaScript

Commencez par inclure jQuery, puis le plugin ajaxFileUpload :

<script src="jquery.min.js" type="text/javascript"></script>
<script src="ajaxfileupload.js" type="text/javascript"></script>

Étape 2 : Structure HTML

Préparez le formulaire avec un champ fichier, un bouton et une zone pour l'aperçu :

<body>
    <input type="file" id="inputFichier" name="fichier" />
    <button type="button" id="btnEnvoyer">Envoyer</button>
    <img id="apercuImage" alt="Fichier uploadé" src="" />
</body>

Étape 3 : Logique JavaScript

Écoutez l'événement clic et lancez l'upload asynchrone :

<script type="text/javascript">
    $(document).ready(function() {
        $("#btnEnvoyer").click(function() {
            envoyerFichier();
        });
    });

    function envoyerFichier() {
        $.ajaxFileUpload({
            url: '/traitement-upload.aspx',
            secureuri: false,
            fileElementId: 'inputFichier',
            dataType: 'json',
            success: function(reponse) {
                if (reponse.urlFichier) {
                    $("#apercuImage").attr("src", reponse.urlFichier);
                }
                if (reponse.erreur) {
                    alert("Erreur : " + reponse.erreur);
                }
            },
            error: function(data, statut, exception) {
                alert("Échec de l'upload : " + exception);
            }
        });
        return false;
    }
</script>

Étape 4 : Traitement côté serveur (ASP.NET Web Forms)

Exemple de page de traitement pour recevoir et sauvegarder le fichier :

protected void Page_Load(object sender, EventArgs e)
{
    HttpFileCollection fichiersRecus = Request.Files;
    if (fichiersRecus.Count > 0)
    {
        string nomOriginal = fichiersRecus[0].FileName;
        string cheminSauvegarde = Server.MapPath("~/uploads/") + System.IO.Path.GetFileName(nomOriginal);
        fichiersRecus[0].SaveAs(cheminSauvegarde);
        string urlPublique = "/uploads/" + nomOriginal;
        string jsonReponse = "{ \"urlFichier\": \"" + urlPublique + "\", \"erreur\": \"\" }";
        Response.ContentType = "application/json";
        Response.Write(jsonReponse);
        Response.End();
    }
}

Version pour ASP.NET MVC

Contrôleur

public class UploadController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult TraiterFichier()
    {
        HttpFileCollectionBase fichiers = Request.Files;
        string cheminResultat = "";
        if (fichiers.Count > 0)
        {
            string nomFichier = fichiers[0].FileName;
            cheminResultat = "/uploads/" + nomFichier;
            string cheminPhysique = Server.MapPath(cheminResultat);
            fichiers[0].SaveAs(cheminPhysique);
        }
        return Json(new { chemin = cheminResultat }, JsonRequestBehavior.DenyGet);
    }
}

Vue (HTML et JavaScript)


<html>
<head>
    <script src="/Scripts/jquery-3.6.0.min.js"></script>
    <script src="/Scripts/ajaxfileupload.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#btnEnvoyer").click(function() {
                if ($("#inputFichier").get(0).files.length > 0) {
                    uploaderVersMVC();
                } else {
                    alert("Veuillez choisir un fichier.");
                }
            });
        });

        function uploaderVersMVC() {
            $.ajaxFileUpload({
                url: '@Url.Action("TraiterFichier", "Upload")',
                secureuri: false,
                fileElementId: 'inputFichier',
                dataType: 'json',
                success: function(data) {
                    if (data.chemin) {
                        $("#imgResultat").attr("src", data.chemin);
                    }
                },
                error: function(xhr, statut, erreur) {
                    console.error("Erreur upload :", erreur);
                }
            });
        }
    </script>
</head>
<body>
    <input type="file" id="inputFichier" name="fichier" />
    <button type="button" id="btnEnvoyer">Transférer</button>
    <img id="imgResultat" alt="Résultat de l'upload" src="" />
</body>
</html>

Étiquettes: jQuery ajaxFileUpload file-upload asynchronous-upload JavaScript

Publié le 16 juillet à 09h12

L'Atelier Monstre