it-swarm.com.de

Wie kann ich Bilder bei der Dateiauswahl automatisch hochladen, anstatt die Upload-Taste zu drücken?

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, nmittelbar nach Auswahl einer Datei anstelle des folgenden Bildes (wo der Pfad angezeigt wird, aber in Firefox schwer zu lesen ist):

enter image description here

Ich möchte, dass die Vorschau wie folgt angezeigt wird: enter image description here

53
Patrick Kenny

Sie sollten dies besser auf Modulebene als auf Themenebene tun, da die JS ansonsten für Administrationsseiten nicht wirksam wird (es sei denn, Sie verwenden natürlich 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-bezogenen Dateieingaben (dh diejenigen mit der Schaltfläche "Aktualisieren") betroffen. Sie müssen nach Auswahl der Datei nicht mehr auf die Schaltfläche "Hochladen" klicken .

Mit der Methode delegate() funktioniert dies auch perfekt für Dateifelder, die mehrere Uploads ermöglichen, sowie für Felder, die als Ergebnis eines AJAX Anfrage.

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 die Methode on() verwenden, die abgelöst wurde delegate().

[~ # ~] update [~ # ~] Ich habe ein Sandbox-Projekt für dieses Modul erstellt.

94
Clive

Verwenden Sie in dieser Situation das Modul AutoUpload .

AutoUpload ist eine Verbesserung der Benutzeroberfläche, die das automatische Hochladen von Dateien initiiert und die Anzahl der von einem Benutzer benötigten 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 erkennen, dass ein Knopfdruck erforderlich ist, und fälschlicherweise glauben, dass ihr Bild hochgeladen wird, wenn dies nicht der Fall ist.

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

12
Cardo

Drupal 6

Versuchen Sie so etwas in Ihrem jQuery-Dokument fertig

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 bin mit keinem Drupal Weg, um dies zu erreichen, vertraut.

Geige

8
niksmac

Sie können dies mit on() erreichen. delegate() ist veraltet.

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

Schauen Sie sich das Modul Plupload Integration an.

Bietet die Integration zwischen dem Widget Plupload zum Hochladen mehrerer Dateien und Drupal. Plupload ist ein GPL-lizenziertes Tool zum Hochladen mehrerer Dateien, das je nach den Funktionen des Client-Computers Widgets in Flash, Gears, HTML 5, Silverlight, BrowserPlus und HTML4 darstellen kann.

3
uwe

Wenn Sie das Feld zum Hochladen von Dateien auf dem Formular AJAX) verwenden, verlieren Sie nach dem Senden möglicherweise die Funktion zum automatischen Hochladen (siehe https://drupal.stackexchange.com/a/31453/7313) )

Zum Reparieren 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);
2
Eugene Fidelin