La méthode directe d'envoi Ajax (comme $.ajax ou $.post) n'est pas conçue pour transférer des fichiers volumineux tels que des images. Il est nécessaire d'utiliser des composants complémentaires ou des astuces pour cette tâche. Voici deux approches courantes.

Approche 1 : Utilisation du greffon Uploadify

Ce greffon utilise une technologie Flash pour contourner les limitations des requêtes Ajax standard. Il permet de sélectionner et d'envoyer des fichiers vers un point de terminaison (endpoint) sur le serveur.

Exemple de vue côté client (Razor + jQuery) :

@{
    ViewBag.Title = "Index";
}
<h2>Téléchargement de fichiers</h2>

<!-- Inclusion des fichiers CSS et JS du greffon -->
<link href="~/Content/uploadify.css" rel="stylesheet" />
<script src="~/Scripts/jquery.uploadify.min.js"></script>

<style>
    .succes { color: Green; font-weight: bold; }
    .erreur { color: Red; font-weight: bold; }
</style>

<script type="text/javascript">
    $(function () {
        $('#fichierAEnvoyer').uploadify({
            'swf': '@Url.Content("~/Content/uploadify.swf")',
            'uploader': '@Url.Action("Telecharger", "Image")',
            'cancelImg': '@Url.Content("~/Content/cancel.png")',
            'fileTypeExts': '*.jpg;*.png;*.gif',
            'fileTypeDesc': 'Images',
            'sizeLimit': 4194304, // Limite à 4 Mo
            'multi': false,
            'onUploadSuccess': function (file, data, response) {
                var estReussi = response === "true";
                var message = estReussi ? "Téléchargement réussi : " + file.name : "Échec du téléchargement.";
                $('#zoneMessage').html(message)
                               .addClass(estReussi ? 'succes' : 'erreur');
            }
        });
    });

    function validerFormulaire() {
        if ($('#fichierAEnvoyer-queue').children().length === 0) {
            alert('Veuillez sélectionner un fichier.');
            return false;
        }
        // Optionnel: Passer des données supplémentaires au script.
        $('#fichierAEnvoyer').uploadify('settings', 'formData', { 'nomPersonnalise': $('#champNom').val() });
        return true;
    }
</script>

<div>
    <input type="text" id="champNom" placeholder="Nom (optionnel)" />
    <p><input type="file" id="fichierAEnvoyer" name="fichier" /></p>
    <p>
        <a href="#" onclick="if(validerFormulaire()) { $('#fichierAEnvoyer').uploadify('upload'); } return false;">Lancer le transfert</a>
    </p>
    <p id="zoneMessage"></p>
</div>

Exemple de contrôleur côté serveur (ASP.NET MVC) :

using System.IO;
using System.Web.Mvc;

namespace MonApplication.Controllers
{
    public class ImageController : Controller
    {
        [HttpPost]
        public ActionResult Telecharger(HttpPostedFileBase fichier, string nomPersonnalise)
        {
            if (fichier == null || fichier.ContentLength == 0)
            {
                return Content("false"); // Signaler un échec au client
            }

            try
            {
                var nomFichierUnique = Path.GetRandomFileName() + Path.GetExtension(fichier.FileName);
                var cheminPhysique = Path.Combine(Server.MapPath("~/App_Data/Uploads"), nomFichierUnique);
                
                fichier.SaveAs(cheminPhysique);
                
                // Logique supplémentaire ici (enregistrement en base, redimensionnement, etc.)
                
                return Content("true"); // Signaler le succès
            }
            catch
            {
                return Content("false"); // Signaler une erreur inattendue
            }
        }
    }
}

Note : La communication avec Uploadify se fait souvent via des simples textes ("true"/"false") ou du HTML, pas nécessairement via du JSON, en raison des spécificités du greffon Flash.

Approche 2 : Utilisation d'un formulaire avec jQuery Form

Cette méthode est plus moderne et n'a pas besoin de Flash. Elle utilise l'objet FormData (disponible dans les navigateurs récents) pour encapsuler les données du formulaire, y compris les fichiers, et les envoyer via une requête Ajax standard.

Le principe consiste à intercepter la soumission d'un formulaire classique de type multipart/form-data, puis à l'envoyer en arrière-plan à l'aide de jQuery et du greffon jQuery Form. Cela permet de conserver une expérience utilisateur fluide (pas de rechargement de page) tout en utilisant le mécanisme standard de téléchargement de fichiers des formulaires HTML.

Le contrôleur MVC côté serveur reste identique à celui utilisé pour un formulaire classique, avec un paramètre de type HttpPostedFileBase.