Jak mogę automatycznie przesyłać zdjęcia po wybraniu pliku zamiast naciskać przycisk przesyłania?

54

Mam niestandardowy typ zawartości, aby umożliwić użytkownikom przesyłanie zdjęć. Staram się, aby interfejs był jak najprostszy.

Typ zawartości zawiera jedno pole obrazu. To działa, ale niektórzy użytkownicy nie rozumieją, że obraz został przesłany, ponieważ nie widzą go po wybraniu (aby wyświetlić podgląd przesyłania, należy nacisnąć przycisk przesyłania). Czy istnieje sposób na pominięcie / automatyczne naciśnięcie przycisku przesyłania, aby obraz był wyświetlany natychmiast po wybraniu pliku?

Innymi słowy, natychmiast po wybraniu pliku, zamiast poniższego obrazu (gdzie ścieżka jest pokazana, ale trudna do odczytania w Firefox):

wprowadź opis zdjęcia tutaj

Chciałbym, aby ekran podglądu był wyświetlany w następujący sposób: wprowadź opis zdjęcia tutaj

Patrick Kenny
źródło

Odpowiedzi:

95

Lepiej byłoby zrobić to na poziomie modułu, niż na poziomie motywu, ponieważ JS nie zadziała inaczej na stronach administracyjnych (chyba że używasz tego samego motywu dla obu).

Oto mały moduł zapewniający tę funkcjonalność w całym systemie:

Plik: auto_upload.info

name = Auto Upload
description = Removes the need for users to press the 'Upload' button for AJAX file uploads.
core = 7.x
dependencies[] = file

Plik: auto_upload.js:

(function ($) {
  Drupal.behaviors.autoUpload = {
    attach: function (context, settings) {
      $('form', context).delegate('input.form-file', 'change', function() {  
        $(this).next('input[type="submit"]').mousedown();
      }); 
    }
  };
})(jQuery);

Plik: auto_upload.module

function auto_upload_init() {
  drupal_add_js(drupal_get_path('module', 'auto_upload') . '/auto_upload.js');
}

Po zainstalowaniu modułu wpłynie to na wszystkie pliki wejściowe, które są obsługiwane przez AJAX (tj. Te, które mają przycisk „Aktualizuj”) ... nie będziesz już musiał naciskać przycisku „Prześlij” po wybraniu pliku .

Dzięki tej delegate()metodzie będzie to również idealnie działać w przypadku pól plików, które umożliwiają wielokrotne przesyłanie, a także pól, które są ładowane na stronę w wyniku żądania AJAX.

Przetestowałem to w Chrome, Safari i Firefox i działa to na dobre :)

Przypis : W (prawdopodobnie bardzo mało prawdopodobnym) zdarzeniu, że Twoja witryna korzysta z jQuery 1.7, powinieneś użyć on()metody, która zastąpiła delegate().

AKTUALIZACJA Stworzyłem projekt piaskownicy dla tego modułu.

Clive
źródło
1
Dziękuję za trochę na temat delegate (), bardzo przydatnej wiedzy!
Johnathan Elmore
@Clive naprawdę fajne! Czy rozważysz wypuszczenie tego jako piaskownicy? Jeśli nie, nie masz nic przeciwko?
Letharion
4
Chciałbym jeszcze raz głosować, gdybym mógł;) Aby zapobiec niepotrzebnemu powielaniu wysiłków, chcę tylko zaznaczyć, że istnieje również Ajax , a Ajax poddaje się dowolnej formie , z których obie są powiązane.
Letharion
1
@Clive Kod działa idealnie, jeśli mam zainstalowany moduł aktualizacji jQuery (nawet z wersją jQuery ustawioną na 1.7, ale nadal z „delegatem” zamiast „on”). Jeśli jednak wyłączę moduł aktualizacji jQuery, wtedy automatyczne przesyłanie rozpocznie się, ale nie zakończy, przechodzi w niekończący się proces przesyłania. Czy możesz potwierdzić, że aktualizacja jQuery jest wymagana?
deinqwertz
1
@deinqwertz Nie powinno być, delegate()dodano w 1.4.2 i Drupal 7 jest dostarczany z 1.4.4. Jestem całkiem pewien, że mam to dobrze na kilku starych stronach z zainstalowanym standardowym jQuery
Clive
13

Dla każdego w tej sytuacji spróbuj użyć modułu AutoUpload .

AutoUpload to rozszerzenie interfejsu użytkownika, które inicjuje automatyczne przesyłanie plików, minimalizując liczbę kliknięć wymaganych przez użytkownika.

Obecnie użytkownicy muszą wybrać pliki, a następnie nacisnąć przycisk „Prześlij”. Odkryliśmy, że użytkownicy często nie zdają sobie sprawy z tego, że naciśnięcie przycisku jest konieczne i mylnie myślą, że ich zdjęcie jest przesyłane, gdy nie jest.

Jest obecnie dostępny dla D6 i D7

Cardo
źródło
9

Drupal 6

Wypróbuj coś takiego w gotowym dokumencie jQuery

jQuery('.form-file').change( function() {   
  jQuery(this).next('.ahah-processed').click();
}); 

Wklej następujące elementy w page.tpl lub node.tpl

drupal_add_js("jQuery(document).ready(function() {
  jQuery('.form-file').change( function() { 
    jQuery(this).next('.ahah-processed').click();
  });   
});", 'inline');

Nie znam żadnego sposobu Drupala na osiągnięcie tego.

skrzypce

niksmac
źródło
Niestety nie wiem, jak korzystać z jQuery. Czy jest na to inny sposób?
Patrick Kenny
@PatrickKenny, zobacz moją edycję. Nie znam żadnego sposobu Drupala na osiągnięcie tego.
niksmac
1
Powinieneś zamienić $ na jQuery ... patrz odpowiedź Clive'a poniżej lub po prostu zmodyfikuj powyższe w następujący sposób: drupal_add_js ("jQuery (dokument) .ready (function () {jQuery ('. Form-file'). Change (function () {jQuery (this) .next ('. ahah-processing'). click ();});}); ", 'inline');
Johnathan Elmore
1
@JohnathanElmore, tak, to nie zadziała w D7. Edytowano
niksmac,
1
@NikhilMohan Istnieje kilka innych problemów: .ahah-processedjest nazwą klasy Drupal 6, a click()metoda z jakiegoś powodu nie wywołuje kliknięcia tych przycisków; musisz użyć mousedown()zamiast tego :)
Clive
5

Możesz to osiągnąć za pomocą on(). delegate()został wycofany.

(function ($) {
  Drupal.behaviors.autoUpload = {
    attach: function (context, settings) {
      $('form', context).on('change', 'input.form-file', function() {  
        $(this).next('input[type="submit"]').mousedown();
      }); 
    }
  };
})(jQuery);
drupal_stuff_alter
źródło
4

Spójrz na moduł integracji Plupload .

Zapewnia integrację między widgetem Plupload w celu przesyłania wielu plików i Drupal. Plupload to licencjonowane przez GPL narzędzie do przesyłania wielu plików, które może prezentować widżety we Flashu, Gears, HTML 5, Silverlight, BrowserPlus i HTML4 w zależności od możliwości komputera klienckiego.

uwe
źródło
3

Jeśli korzystasz z pola przesyłania plików w formularzu AJAX - po jego przesłaniu możesz utracić funkcję automatycznego przesyłania (patrz https://drupal.stackexchange.com/a/31453/7313 )

Aby naprawić - użyj tego skryptu

(function($) {

Drupal.behaviors.autoUpload = {
  attach: function (context, settings) {
    $('input.form-file', context).once(function() {
      $(this).change(function() {
        $(this).parent().find('input[type="submit"]').mousedown();
      });
    });
  }
};

})(jQuery);
Eugene Fidelin
źródło
W moim przypadku spowodowało, że formularz wysyłał żądania AJAX dla pól plików stale w tle. Dodatkowo pokazuje pulsujący ładunek na pustym polu.
Елин Й.