Wie erzwinge ich Browser-Downloads für Bilder mithilfe clientseitiger Programmierung?

Browser-Downloads für Bilder mithilfe clientseitiger Programmierung erzwingen

Hintergrund

Beim Klicken auf B. eine Excel-Tabelle oder andere herunterladbare Dateien, starten Browser den Downloadvorgang normalerweise nahtlos. Es besteht jedoch die Notwendigkeit, dieses Verhalten speziell für Bilddateien zu replizieren.

Implementieren von Bild-Downloads

Allein mit der clientseitigen Programmierung können Sie Bild-Downloads wie folgt erreichen :

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);
    }
}

Dieser Code fängt Klickereignisse auf dem Bildelement ab und fordert den Benutzer auf, es mithilfe eines Dialogfelds „Speichern unter“ zu speichern Box.

Fall von Excel-Downloads

Bei Excel-Downloads übernehmen Browser den Downloadvorgang intern. Sie identifizieren den Dateityp anhand des MIME-Typs und lösen ohne zusätzliche Programmierung das entsprechende Download-Verhalten aus.

HTML5-Attribut „Download“

Neuere Browser unterstützen jedoch das Attribut „Download“ für Elemente, die eine bequemere Möglichkeit zum Starten von Bilddownloads bieten:

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

Dieses Attribut fordert den Browser auf, das Bild mit dem angegebenen Dateinamen oder dem Originaldateinamen herunterzuladen, sofern dieser nicht angegeben ist. Beachten Sie, dass ursprungsübergreifende Downloads mit dieser Methode ab 2018 aus Sicherheitsgründen nicht mehr unterstützt werden.

Das obige ist der detaillierte Inhalt vonWie erzwinge ich Browser-Downloads für Bilder mithilfe clientseitiger Programmierung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!