Scarica file utilizzando jQuery


113

Come posso richiedere un download per un utente quando fa clic su un collegamento.

Ad esempio, invece di:

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

Potrei usare:

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

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

In questo modo, Google non indicizza i miei file HREF e privati.

Può essere fatto con jQuery, se sì, come? O dovrebbe essere fatto con PHP o qualcosa del genere?


Possibile duplicato del file
Liam

Risposte:


165

Potrei suggerire questo, come una soluzione più graziosamente degradante, usando 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>

Anche se non c'è Javascript, almeno in questo modo l'utente riceverà un feedback.


20
jQuery è la risposta.
Esteban Küber

Grazie, questo è quello che stavo cercando. Di solito uso "preventDefault", l'ho lasciato fuori sopra perché ero pigro. ;-)
Dodinas

2
Funziona alla grande, ma ottieni alcuni errori di tipo MIME. Curioso se ci sono modi per superarli?
Nathan Hangen

2
Hai risolto l'avviso di tipo MIME? Ottengo "Risorsa interpretata come documento ma trasferita con tipo MIME ..." Molte grazie.
user1824269

22

Se non desideri che i motori di ricerca indicizzino determinati file, puoi utilizzare robots.txt per dire agli spider web di non accedere a determinate parti del tuo sito web.

Se ti affidi solo a javascript, alcuni utenti che navigano senza di esso non saranno in grado di fare clic sui tuoi collegamenti.


1
Buono a sapersi del "robots.txt". Grazie.
Dodinas

@Rob, se hai bisogno che gli URL siano "privati", robots.txtnon sarebbe di aiuto perché verrebbero comunque memorizzati nella cronologia del browser e nei server intermedi.
Pacerier

3
6 anni dopo: navigazione senza javascript? - beh, potresti anche andare a fare una passeggiata.
low_rents

quasi 10 anni dopo: stesso! o ?
toing_toing

18

Ecco un bell'articolo che mostra molti modi per nascondere i file dai motori di ricerca:

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

JavaScript non è un buon modo per non indicizzare una pagina; non impedirà agli utenti di collegarsi direttamente ai tuoi file (e quindi di rivelarli ai crawler) e, come ha detto Rob, non funzionerebbe per tutti gli utenti.
Una soluzione semplice consiste nell'aggiungere l' rel="nofollow"attributo, anche se, di nuovo, non è completo senza robots.txt.

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

2
Ecco un altro articolo della Guida di Google per webmaster che mi aiuta molto a capire la relazione "nofollow" o "me".
000

12

Sì, dovresti cambiare window.location.href con l'URL del file che desideri scaricare.

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

cosa succede se l'estensione del file è .html, invece di scaricarlo reindirizzerà a quel file html
Kaleem Nalband

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

nessun errore, solo il download non si avviava. Penso che forse mi manca qualche punto durante la creazione dell'elemento.
shyammakwana.me

verifica nel tuo html se un elemento <a> è stato creato o no e verifica il collegamento al file.
EL missaoui habib

un tag era lì, nel corpo. e facendo clic manualmente sul download dell'immagine. tuttavia non è necessario ora, ho usato questa soluzione vanillaJS.
shyammakwana.me

non ci sono motivi per non funzionare sono il collegamento corretto. testare il collegamento diretto in navigazione
EL missaoui habib

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

7
  • Utilizzando la funzione jQuery

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

6

Affermando window.location.href = 'uploads/file.doc';di mostrare dove memorizzi i tuoi file. Ovviamente potresti usare .htacess per forzare il comportamento richiesto per i file archiviati, ma questo potrebbe non essere sempre una manciata ...

È meglio creare un file php lato server e inserire questo contenuto in esso:

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

Questo codice restituirà QUALSIASI file come download senza mostrare dove lo memorizzi effettivamente.

Apri questo file php tramite window.location.href = 'scripts/this_php_file.php?f=downloaded_file';


Questa soluzione mi ha aiutato a risolvere i problemi di download sul mio sito, grazie!
Denniz

3

Gli iframe nascosti possono aiutare


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

3

Ti suggerisco di utilizzare l'evento mousedown, che si chiama PRIMA dell'evento clic. In questo modo, il browser gestisce l'evento clic in modo naturale, evitando qualsiasi stranezza del codice:

(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

Vedi qui per un post simile sull'uso di jQuery per cancellare i moduli: Reimpostazione di un modulo in più fasi con jQuery

Potresti anche riscontrare un problema in cui i valori vengono ripopolati dallo stack di valori dei montanti. In altre parole, si invia il modulo, si esegue qualsiasi operazione nella classe di azione, ma non si cancellano i valori dei campi correlati nella classe di azione. In questo scenario, il modulo sembrerebbe mantenere i valori inviati in precedenza. Se li stai persistendo in qualche modo, annulla semplicemente il valore di ogni campo nella tua classe di azione dopo la persistenza e prima di restituire SUCCESS.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.