Come posso caricare automaticamente le immagini sulla selezione dei file anziché premere il pulsante di caricamento?

Ho un tipo di contenuto personalizzato per consentire agli utenti di caricare immagini. Sto cercando di mantenere l'interfaccia il più semplice possibile.

Il tipo di contenuto contiene un singolo campo immagine. Funziona, ma alcuni utenti non comprendono che l'immagine è stata caricata perché non la vedono dopo aver selezionato (per visualizzare l'anteprima del caricamento, è necessario premere il pulsante di caricamento). C'è un modo per saltare / premere automaticamente il pulsante di caricamento in modo che un'immagine venga mostrata immediatamente dopo la selezione di un file?

In altre parole, immediatamente dopo aver selezionato un file, anziché la seguente immagine (in cui il percorso è mostrato ma difficile da leggere in Firefox):

Vorrei che l'anteprima venisse mostrata in questo modo:

Faresti meglio a farlo a livello di modulo, piuttosto che a livello di tema, poiché JS non avrà effetto per le pagine di amministrazione altrimenti (a meno che, ovviamente, non utilizzi lo stesso tema per entrambi).

Ecco un piccolo modulo per fornire questa funzionalità a livello di sistema:

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

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

File: auto_upload.module

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

Dopo aver installato il modulo, tutti gli input di file che sono AJAX-ified (ovvero quelli che hanno un pulsante 'Aggiorna') saranno interessati ... non sarà più necessario premere il pulsante 'Upload' dopo aver selezionato il file .

Utilizzando il delegate()metodo funzionerà perfettamente anche per i campi file che consentono caricamenti multipli e anche per i campi caricati nella pagina come risultato di una richiesta AJAX.

L'ho provato su Chrome, Safari e Firefox e funziona a meraviglia :)

Nota a piè di pagina : nell'evento (probabilmente molto improbabile) in cui il tuo sito utilizza jQuery 1.7, dovresti utilizzare il on()metodo che ha superato delegate().

AGGIORNAMENTO Ho creato un progetto sandbox per questo modulo.

Per chiunque si trovi in ​​questa situazione, prova a utilizzare il modulo AutoUpload .

AutoUpload è un miglioramento dell'interfaccia utente (UI) che avvia il caricamento automatico dei file riducendo al minimo il numero di clic richiesti da un utente.

Attualmente, gli utenti devono selezionare i file, quindi premere il pulsante "Carica". Abbiamo scoperto che gli utenti spesso non si rendono conto che è necessaria la pressione di un pulsante e erroneamente pensano che la loro immagine sia caricata quando non lo è.

È attualmente disponibile per D6 e D7

Drupal 6

Prova qualcosa di simile nel tuo documento jQuery pronto

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

Incollare quanto segue in page.tpl o node.tpl

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

Non ho familiarità con qualsiasi modo Drupal per raggiungere questo obiettivo.

violino

Puoi raggiungerlo usando on(). delegate()è stato deprecato.

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

Dai un'occhiata al modulo di integrazione Plupload .

Fornisce l'integrazione tra per il widget Plupload per caricare più file e Drupal. Plupload è uno strumento di caricamento di file multipli con licenza GPL che può presentare widget in Flash, Gears, HTML 5, Silverlight, BrowserPlus e HTML4 a seconda delle capacità del computer client.

Se si utilizza il campo di caricamento del file sul modulo AJAX - dopo l'invio potrebbe perdere la funzionalità di caricamento automatico (consultare https://drupal.stackexchange.com/a/31453/7313 )

Per risolvere: usa questo script

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