Comment forcer le téléchargement d'images dans le navigateur à l'aide de la programmation côté client ?

Forcer le téléchargement des images dans le navigateur à l'aide de la programmation côté client

Arrière-plan

Lorsque vous cliquez sur une feuille Excel ou d'autres fichiers téléchargeables, les navigateurs lancent généralement le processus de téléchargement de manière transparente. Cependant, il est nécessaire de reproduire ce comportement spécifiquement pour les fichiers image.

Implémentation des téléchargements d'images

En utilisant uniquement la programmation côté client, vous pouvez réaliser des téléchargements d'images comme suit :

document.onclick = function (e) {
    e = e || window.event;
    var element = e.target || e.srcElement;
    if (element.innerHTML == "Image") {
        var name = element.nameProp;
        var address = element.href;
        saveImageAs1(element.nameProp, element.href);
        return false; // Prevent default action and stop event propagation
    }
    else
        return true;
};

function saveImageAs1(name, address) {
    if (confirm('you wanna save this image?')) {
        window.win = open(address);
        setTimeout('win.document.execCommand("SaveAs")', 100);
        setTimeout('win.close()', 500);
    }
}

Ce code intercepte les événements de clic sur l'élément image et invite l'utilisateur à l'enregistrer à l'aide d'une boîte de dialogue Enregistrer sous box.

Cas des téléchargements Excel

Dans le cas des téléchargements Excel, les navigateurs gèrent le processus de téléchargement en interne. Ils identifient le type de fichier en fonction du type MIME et déclenchent le comportement de téléchargement approprié sans aucune programmation supplémentaire.

Attribut HTML5 'download'

Cependant, les navigateurs les plus récents prennent en charge le attribut 'download' pour elements, qui offre un moyen plus pratique de lancer le téléchargement d'images :

<a href="http://localhost:55298/SaveImage/demo/abc.jpg" download>Image</a>

Cet attribut invite le navigateur à télécharger l'image avec le nom de fichier fourni ou le nom de fichier d'origine, s'il n'est pas spécifié. Notez que les téléchargements multi-origines utilisant cette méthode ne sont plus pris en charge à partir de 2018 en raison de problèmes de sécurité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!