Pobierz plik za pomocą jQuery


113

Jak mogę poprosić użytkownika o pobranie po kliknięciu łącza.

Na przykład zamiast:

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

Mógłbym użyć:

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

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

W ten sposób Google nie indeksuje moich plików HREF i prywatnych.

Czy można to zrobić za pomocą jQuery, a jeśli tak, to w jaki sposób? A może powinno to być zrobione za pomocą PHP czy czegoś innego?


Odpowiedzi:


165

Mogę zasugerować, jako bardziej wdzięcznie poniżające rozwiązanie, używając 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>

Nawet jeśli nie ma Javascript, przynajmniej w ten sposób użytkownik otrzyma opinię.


20
jQuery jest odpowiedź.
Esteban Küber

Dzięki, właśnie tego szukałem. Zwykle używam „PreventDefault”, po prostu zostawiłam to powyżej, ponieważ byłem leniwy. ;-)
Dodinas

2
Działa świetnie, ale pojawiają się błędy typu MIME. Ciekawe, czy są jakieś sposoby, aby je ominąć?
Nathan Hangen

2
Czy rozwiązałeś ostrzeżenie o typie MIME? Otrzymuję komunikat „Zasób zinterpretowany jako dokument, ale przesłany z typem MIME…” Wielkie dzięki.
user1824269

22

Jeśli nie chcesz, aby wyszukiwarki indeksowały określone pliki, możesz użyć pliku robots.txt, aby poinformować roboty sieciowe, aby nie miały dostępu do określonych części witryny.

Jeśli polegasz tylko na javascript, niektórzy użytkownicy przeglądający bez niego nie będą mogli kliknąć Twoich linków.


1
Warto wiedzieć o pliku „robots.txt”. Dziękuję Ci.
Dodinas

@Rob, jeśli chcesz, aby adresy URL były „prywatne”, robots.txtnie pomoże, ponieważ nadal będą przechowywane w historii przeglądarki i serwerach pośredniczących.
Pacerier

3
6 lat później: przeglądanie bez javascript? - cóż, można też zamiast tego pójść na spacer.
low_rents

prawie 10 lat później: to samo! czy?
toing_toing

18

Oto fajny artykuł, który pokazuje wiele sposobów ukrywania plików przed wyszukiwarkami:

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

JavaScript nie jest dobrym sposobem na niezindeksowanie strony; nie uniemożliwi to użytkownikom bezpośredniego łączenia się z Twoimi plikami (a tym samym ujawniania tego robotom indeksującym) i, jak wspomniał Rob, nie będzie działać dla wszystkich użytkowników.
Łatwym rozwiązaniem jest dodanie rel="nofollow"atrybutu, chociaż znowu nie jest to kompletne bez pliku robots.txt.

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

2
Oto kolejny artykuł w Pomocy Google dla webmaserów, który bardzo pomaga mi zrozumieć relację „nofollow” lub „me”.
000

12

Tak, musiałbyś zmienić window.location.href na adres URL pliku, który chcesz pobrać.

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

co jeśli rozszerzenie pliku to .html, zamiast pobierania przekieruje do tego pliku html
Kaleem Nalband

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

brak błędu, po prostu pobieranie się nie rozpoczęło. Myślę, że może brakuje mi jakiegoś punktu podczas tworzenia elementu.
shyammakwana.me

sprawdź w swoim html, czy element <a> został utworzony, czy nie, i sprawdź łącze do pliku.
EL missaoui habib

tag był tam, w ciele. i poprzez ręczne kliknięcie powoduje pobranie obrazu. Jednak teraz nie jest to potrzebne, użyłem tego rozwiązania vanillaJS.
shyammakwana.me

nie ma powodu do niedziałania, czy link jest poprawny. przetestuj link bezpośrednio w przeglądarce
EL missaoui habib

$('blah').each(function(){ $('body').append('<a href="'+xxx+'" download="'+dynamicname+'" />'); }) $('a').trigger('click');użyłem tego.
shyammakwana.me


6

Podając, window.location.href = 'uploads/file.doc';że pokazujesz, gdzie przechowujesz swoje pliki. Możesz oczywiście użyć .htacess, aby wymusić wymagane zachowanie przechowywanych plików, ale nie zawsze może to być przydatne ....

Lepiej jest utworzyć plik php po stronie serwera i umieścić w nim następującą zawartość:

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

Ten kod zwróci DOWOLNY plik jako pobrany bez pokazywania, gdzie faktycznie go przechowujesz.

Otwierasz ten plik php przez window.location.href = 'scripts/this_php_file.php?f=downloaded_file';


To rozwiązanie pomogło mi rozwiązać problemy z pobieraniem w mojej witrynie, dzięki!
Denniz

3

Mogą pomóc ukryte elementy iframe


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

3

Sugeruję użycie zdarzenia mousedown, które nazywa się PRZED zdarzeniem kliknięcia. W ten sposób przeglądarka w naturalny sposób obsługuje zdarzenie kliknięcia, co pozwala uniknąć dziwności kodu:

(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

Zobacz tutaj podobny post na temat używania jQuery do czyszczenia formularzy: Resetowanie wieloetapowego formularza za pomocą jQuery

Możesz również napotkać problem polegający na tym, że wartości są ponownie zapełniane przez stos wartości Struts. Innymi słowy, przesyłasz swój formularz, robisz cokolwiek w klasie akcji, ale nie usuwasz powiązanych wartości pól w klasie akcji. W tym scenariuszu wyglądałoby na to, że formularz zachowuje wcześniej przesłane wartości. Jeśli w jakiś sposób je utrwalasz, po prostu wyzeruj każdą wartość pola w klasie akcji po utrwaleniu i przed zwróceniem SUKCESU.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.