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

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):

Chciałbym, aby ekran podglądu był wyświetlany w następujący sposób:

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.

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

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

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

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.

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