Rumah >hujung hadapan web >tutorial js >Bagaimana Memaksa Muat Turun Penyemak Imbas untuk Imej Menggunakan Pengaturcaraan Sisi Pelanggan?

Bagaimana Memaksa Muat Turun Penyemak Imbas untuk Imej Menggunakan Pengaturcaraan Sisi Pelanggan?

Patricia Arquette
Patricia Arquetteasal
2024-11-09 05:56:02230semak imbas

How to Force Browser Downloads for Images Using Client-Side Programming?

Memaksa Muat Turun Penyemak Imbas untuk Imej Menggunakan Pengaturcaraan Sisi Pelanggan

Latar Belakang

Apabila mengklik pada helaian Excel atau fail lain yang boleh dimuat turun, penyemak imbas biasanya memulakan proses muat turun dengan lancar. Walau bagaimanapun, terdapat keperluan untuk meniru tingkah laku ini untuk fail imej secara khusus.

Melaksanakan Muat Turun Imej

Menggunakan pengaturcaraan sisi klien sahaja, anda boleh mencapai muat turun imej seperti berikut :

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

Kod ini memintas peristiwa klik pada elemen imej dan menggesa pengguna untuk menyimpannya menggunakan dialog Simpan Sebagai kotak.

Kes Muat Turun Excel

Dalam kes muat turun Excel, penyemak imbas mengendalikan proses muat turun secara dalaman. Mereka mengenal pasti jenis fail berdasarkan jenis MIME dan mencetuskan gelagat muat turun yang sesuai tanpa sebarang pengaturcaraan tambahan.

Atribut 'muat turun' HTML5

Walau bagaimanapun, penyemak imbas baharu menyokong atribut 'muat turun' untuk elemen, yang menyediakan cara yang lebih mudah untuk memulakan muat turun imej:

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

Atribut ini menggesa penyemak imbas untuk memuat turun imej dengan nama fail yang disediakan atau nama fail asal, jika tidak dinyatakan. Harap maklum bahawa muat turun silang asal menggunakan kaedah ini tidak lagi disokong mulai 2018 kerana kebimbangan keselamatan.

Atas ialah kandungan terperinci Bagaimana Memaksa Muat Turun Penyemak Imbas untuk Imej Menggunakan Pengaturcaraan Sisi Pelanggan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn