Wie kann ich Bilder bei der Dateiauswahl automatisch hochladen, anstatt auf die Schaltfläche zum Hochladen zu klicken?

54

Ich habe einen benutzerdefinierten Inhaltstyp, mit dem Benutzer Bilder hochladen können. Ich versuche die Oberfläche so einfach wie möglich zu halten.

Der Inhaltstyp enthält ein einzelnes Bildfeld. Dies funktioniert, aber einige Benutzer verstehen nicht, dass das Bild hochgeladen wurde, da sie es nach der Auswahl nicht sehen (um eine Vorschau des Uploads anzuzeigen, muss die Upload-Schaltfläche gedrückt werden). Gibt es eine Möglichkeit, die Upload-Taste zu überspringen / automatisch zu drücken, sodass ein Bild sofort nach Auswahl einer Datei angezeigt wird?

Mit anderen Worten, direkt nach der Auswahl einer Datei anstelle des folgenden Bilds (wo der Pfad angezeigt wird, aber in Firefox schwer zu lesen ist):

Bildbeschreibung hier eingeben

Ich möchte, dass die Vorschau so angezeigt wird: Bildbeschreibung hier eingeben

Patrick Kenny
quelle

Antworten:

95

Sie sollten dies lieber auf Modulebene als auf Themenebene tun, da die JS ansonsten für Administrationsseiten nicht wirksam wird (es sei denn, Sie verwenden für beide das gleiche Thema).

Hier ist ein kleines Modul, um diese Funktionalität systemweit bereitzustellen:

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

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

Datei: auto_upload.module

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

Sobald Sie das Modul installiert haben, sind alle AJAX-fähigen Dateieingaben (dh die mit der Schaltfläche 'Aktualisieren') betroffen. Sie müssen nach Auswahl der Datei nicht mehr auf die Schaltfläche 'Hochladen' klicken .

Mit der delegate()Methode funktioniert dies auch perfekt für Dateifelder, die mehrere Uploads zulassen, sowie für Felder, die als Ergebnis einer AJAX-Anforderung in die Seite geladen werden.

Ich habe das in Chrome, Safari und Firefox getestet und es funktioniert ein Vergnügen :)

Fußnote : In dem (wahrscheinlich sehr unwahrscheinlichen) Fall, dass Ihre Site jQuery 1.7 verwendet, sollten Sie on()die überholte Methode verwenden delegate().

UPDATE Für dieses Modul habe ich ein Sandbox-Projekt erstellt .

Clive
quelle
1
Vielen Dank für das bisschen über delegate (), sehr nützliches Wissen!
Johnathan Elmore
@Clive wirklich cool! Denken Sie darüber nach, dies als Sandbox zu veröffentlichen? Wenn nicht, stört es mich, wenn ich es tue?
Letharion
4
Ich würde noch einmal positiv stimmen, wenn ich könnte;) Um unnötige Doppelarbeit zu vermeiden, möchte ich nur darauf hinweisen, dass es auch Ajax gibt und Ajax für jede Form einreicht , die beide etwas miteinander zu tun haben.
Letharion
1
@Clive Der Code funktioniert einwandfrei, wenn ich das jQuery Update-Modul installiert habe (auch wenn die jQuery-Version auf 1.7 eingestellt ist, aber immer noch 'delegieren' statt 'ein'). Wenn ich das jQuery Update-Modul deaktiviere, wird der automatische Upload zwar gestartet, aber nicht beendet, sondern es wird ein endloser Upload-Vorgang ausgeführt. Können Sie bestätigen, dass ein jQuery-Update erforderlich ist?
Deinqwertz
1
@deinqwertz Sollte nicht sein, delegate()wurde in 1.4.2 und Drupal 7 mit 1.4.4 ausgeliefert. Ich bin mir ziemlich sicher, dass dies auf einigen alten Sites mit der installierten jQuery funktioniert
Clive
13

Verwenden Sie in dieser Situation das AutoUpload- Modul.

AutoUpload ist eine Erweiterung der Benutzeroberfläche, die das automatische Hochladen von Dateien initiiert und die Anzahl der für einen Benutzer erforderlichen Klicks minimiert.

Derzeit müssen Benutzer Dateien auswählen und dann auf die Schaltfläche "Hochladen" klicken. Wir haben festgestellt, dass Benutzer häufig nicht wissen, dass ein Tastendruck erforderlich ist, und glauben fälschlicherweise, dass ihr Bild hochgeladen wird, wenn dies nicht der Fall ist.

Es ist derzeit für D6 und D7 verfügbar

Cardo
quelle
9

Drupal 6

Probieren Sie so etwas in Ihrem jQuery-Dokument aus

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

Fügen Sie Folgendes in page.tpl oder node.tpl ein

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

Ich kenne keinen Drupal-Weg, um dies zu erreichen.

Geige

Niksmac
quelle
Leider kann ich jQuery nicht verwenden. Gibt es eine andere Möglichkeit, dies zu tun?
Patrick Kenny
@PatrickKenny, siehe meine Bearbeitung. Ich kenne keinen Drupal-Weg, um dies zu erreichen.
Niksmac
1
Sie sollten das $ durch jQuery ersetzen ... siehe die Antwort von Clive unten oder ändern Sie einfach das Obige wie folgt: drupal_add_js ("jQuery (document) .ready (function () {jQuery ('. Form-file'). Change (function () {jQuery (this) .next ('. ahah-processing'). click ();});}); ", 'inline');
Johnathan Elmore
1
@ JohnathanElmore, ja, es wird in D7 nicht funktionieren. Bearbeitet
Niksmac
1
@NikhilMohan Es gibt einige andere Probleme: Es .ahah-processedhandelt sich um einen Drupal 6-Klassennamen, und die click()Methode ruft aus irgendeinem Grund keinen Klick auf diese Schaltflächen auf. Sie müssen mousedown()stattdessen verwenden :)
Clive
5

Sie erreichen es mit on(). delegate()wurde veraltet.

(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
quelle
4

Schauen Sie sich das Integrationsmodul von Plupload an .

Bietet eine Integration zwischen dem Plupload- Widget zum Hochladen mehrerer Dateien und Drupal. Plupload ist ein GPL-lizenziertes Tool zum Hochladen mehrerer Dateien, mit dem Widgets in Flash, Gears, HTML 5, Silverlight, BrowserPlus und HTML4 je nach den Funktionen des Clientcomputers dargestellt werden können.

uwe
quelle
3

Wenn Sie das Feld zum Hochladen von Dateien im AJAX-Formular verwenden - nach dem Absenden können Sie die Funktion zum automatischen Hochladen verlieren (siehe https://drupal.stackexchange.com/a/31453/7313 ).

Um das Problem zu beheben, verwenden Sie dieses Skript

(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
quelle
In meinem Fall hat es das Formular veranlasst, ständig im Hintergrund AJAX-Anforderungen für die Dateifelder zu senden. Außerdem wird ein Ladepochen auf einem leeren Feld angezeigt.
Елин Й.