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

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

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

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 .

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

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

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

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.

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