Unduh File Menggunakan jQuery


113

Bagaimana saya bisa meminta download untuk pengguna ketika mereka mengklik link.

Misalnya, alih-alih:

<a href="uploads/file.doc">Download Here</a>

Saya bisa menggunakan:

<a href="#">Download Here</a>

 $('a').click... //Some jquery to download the file

Dengan cara ini, Google tidak mengindeks file HREF dan pribadi saya.

Bisakah ini dilakukan dengan jQuery, jika demikian, bagaimana? Atau haruskah ini dilakukan dengan PHP atau sebaliknya?


Jawaban:


165

Saya mungkin menyarankan ini, sebagai solusi merendahkan yang lebih anggun, menggunakan preventDefault:

$('a').click(function(e) {
    e.preventDefault();  //stop the browser from following
    window.location.href = 'uploads/file.doc';
});

<a href="no-script.html">Download now!</a>

Meskipun tidak ada Javascript, setidaknya dengan cara ini pengguna akan mendapatkan umpan balik.


20
jQuery adalah yang jawabannya.
Esteban Küber

Terima kasih, inilah yang saya cari. Saya biasanya menggunakan "preventDefault", biarkan saja di atas karena saya malas. ;-)
Dodinas

2
Berfungsi dengan baik, tetapi dapatkan beberapa kesalahan jenis MIME. Penasaran apakah ada cara untuk melewati mereka?
Nathan Hangen

2
Apakah Anda menyelesaikan peringatan jenis MIME? Saya mendapatkan "Sumber daya ditafsirkan sebagai Dokumen tetapi ditransfer dengan tipe MIME ..." Terima kasih banyak.
pengguna1824269

22

Jika Anda tidak ingin mesin telusur mengindeks file tertentu, Anda dapat menggunakan robots.txt untuk memberi tahu spider web agar tidak mengakses bagian tertentu dari situs web Anda.

Jika Anda hanya mengandalkan javascript, beberapa pengguna yang menjelajah tanpa javascript tidak akan dapat mengeklik tautan Anda.


1
Sebaiknya Anda tahu tentang 'robots.txt'. Terima kasih.
Dodinas

@Rob, Jika Anda membutuhkan URL untuk menjadi "pribadi", robots.txttidak akan membantu karena akan tetap disimpan di riwayat browser dan server perantara.
Pacerier

3
6 tahun kemudian: menjelajah tanpa javascript? - yah, kamu juga bisa jalan-jalan saja.
low_rents

hampir 10 tahun kemudian: sama! atau ?
toing_toing

18

Berikut artikel bagus yang menunjukkan banyak cara menyembunyikan file dari mesin pencari:

http://antezeta.com/news/avoid-search-engine-indexing

JavaScript bukanlah cara yang baik untuk tidak mengindeks halaman; itu tidak akan mencegah pengguna untuk menautkan langsung ke file Anda (dan dengan demikian mengungkapkannya kepada perayap), dan seperti yang disebutkan Rob, tidak akan berfungsi untuk semua pengguna.
Perbaikan yang mudah adalah dengan menambahkan rel="nofollow"atribut, meskipun sekali lagi, ini tidak lengkap tanpa robots.txt.

<a href="uploads/file.doc" rel="nofollow">Download Here</a>

2
Berikut ini adalah petunjuk lain dari Bantuan Google untuk Webmasers yang sangat membantu saya memahami rel "nofollow" atau "saya".
000

12

Ya, Anda harus mengubah window.location.href ke url file yang ingin Anda unduh.

window.location.href = 'http://www.com/path/to/file';

bagaimana jika ekstensi file adalah .html, alih-alih mengunduhnya, itu akan mengarahkan ke file html itu
Kaleem Nalband

9
 var link=document.createElement('a');
 document.body.appendChild(link);
 link.href=url;
 link.click();

tidak ada kesalahan, unduhan saja tidak dimulai. Saya pikir mungkin ada beberapa hal yang hilang saat membuat elemen.
shyammakwana.me

verifikasi di html Anda jika elemen <a> dibuat atau tidak ada dan verifikasi link file Anda.
EL missaoui habib

tag ada di sana, di tubuh. dan dengan mengklik manual itu mengunduh gambar. Namun tidak diperlukan sekarang, saya menggunakan solusi vanillaJS ini.
shyammakwana.me

tidak ada alasan untuk tidak berfungsi apakah tautannya benar. uji link langsung di browse
EL missaoui habib

$('blah').each(function(){ $('body').append('<a href="'+xxx+'" download="'+dynamicname+'" />'); }) $('a').trigger('click');saya menggunakan itu.
shyammakwana.me

7
  • Menggunakan fungsi jQuery

        var valFileDownloadPath = 'http//:'+'your url';
    
       window.open(valFileDownloadPath , '_blank');

6

Dengan menyatakan window.location.href = 'uploads/file.doc';Anda menunjukkan di mana Anda menyimpan file Anda. Anda tentu saja dapat menggunakan .htacess untuk memaksa perilaku yang diperlukan untuk file yang disimpan, tetapi ini mungkin tidak selalu berguna ....

Lebih baik membuat file php sisi server dan menempatkan konten ini di dalamnya:

header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename='.$_REQUEST['f']);
readfile('../some_folder/some_subfolder/'.$_REQUEST['f']); 
exit;

Kode ini akan mengembalikan file APA PUN sebagai unduhan tanpa menunjukkan di mana Anda sebenarnya menyimpannya.

Anda membuka file php ini melalui window.location.href = 'scripts/this_php_file.php?f=downloaded_file';


Solusi ini membantu saya memperbaiki masalah unduhan di situs saya, terima kasih!
Denniz

3

Iframe tersembunyi dapat membantu


var redeemFrame = document.createElement ("iframe"); var src = "doDownload.php"; redeemFrame.setAttribute ("src", src); redeemFrame.setAttribute ("style", "display: none"); document.body.appendChild (redeemFrame);
DarthRez

3

Saya sarankan Anda menggunakan acara mousedown, yang disebut SEBELUM acara klik. Dengan begitu, browser menangani peristiwa klik secara alami, yang menghindari keanehan kode:

(function ($) {


    // with this solution, the browser handles the download link naturally (tested in chrome and firefox)
    $(document).ready(function () {

        var url = '/private/downloads/myfile123.pdf';
        $("a").on('mousedown', function () {
            $(this).attr("href", url);
        });

    });
})(jQuery);

0

Lihat di sini untuk posting serupa tentang menggunakan jQuery untuk menghapus formulir: Mengatur ulang formulir multi-tahap dengan jQuery

Anda mungkin juga mengalami masalah di mana nilai sedang diisi kembali oleh tumpukan nilai struts. Dengan kata lain, Anda mengirimkan formulir Anda, melakukan apa pun di kelas tindakan, tetapi tidak menghapus nilai bidang terkait di kelas tindakan. Dalam skenario ini, formulir akan muncul untuk mempertahankan nilai yang Anda kirimkan sebelumnya. Jika Anda mempertahankan ini dalam beberapa cara, cukup kosongkan setiap nilai bidang di kelas tindakan Anda setelah bertahan dan sebelum mengembalikan SUCCESS.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.