¿Cómo puedo cargar automáticamente imágenes en la selección de archivos en lugar de presionar el botón de carga?

Tengo un tipo de contenido personalizado para permitir a los usuarios cargar imágenes. Estoy tratando de mantener la interfaz lo más simple posible.

El tipo de contenido contiene un solo campo de imagen. Esto funciona, pero algunos usuarios no entienden que la imagen se ha subido porque no la ven después de seleccionar (para obtener una vista previa de la carga, se debe presionar el botón de carga). ¿Hay alguna manera de omitir / presionar automáticamente el botón de carga para que se muestre una imagen inmediatamente después de seleccionar un archivo?

En otras palabras, inmediatamente después de seleccionar un archivo, en lugar de la siguiente imagen (donde se muestra la ruta pero es difícil de leer en Firefox):

Me gustaría que la vista previa se muestre así:

Sería mejor hacer esto en el nivel del módulo, en lugar del nivel del tema, ya que el JS no tendrá efecto para las páginas de administración de lo contrario (a menos que, por supuesto, esté usando el mismo tema para ambos).

Aquí hay un pequeño módulo para proporcionar esta funcionalidad en todo el sistema:

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

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

Archivo: auto_upload.module

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

Una vez que haya instalado el módulo, se verán afectadas todas las entradas de archivos que tengan AJAX (es decir, aquellas que tengan un botón 'Actualizar') ... ya no tendrá que presionar el botón 'Cargar' después de seleccionar el archivo .

Al usar el delegate()método, esto también funcionará perfectamente para los campos de archivo que permiten múltiples cargas, y también para los campos que se cargan en la página como resultado de una solicitud AJAX.

Lo probé en Chrome, Safari y Firefox y funciona de maravilla :)

Nota al pie : en el caso (probablemente muy poco probable) de que su sitio esté usando jQuery 1.7, debe usar el on()método, que ha sido reemplazado delegate().

ACTUALIZACIÓN He creado un proyecto de sandbox para este módulo.

Para cualquiera que se encuentre en esta situación, intente usar el módulo AutoUpload .

AutoUpload es una mejora de la interfaz de usuario (UI) que inicia la carga automática de archivos minimizando la cantidad de clics requeridos por un usuario.

Actualmente, los usuarios deben seleccionar archivos y luego presionar el botón "Cargar". Descubrimos que los usuarios a menudo no se dan cuenta de que es necesario presionar un botón y creen erróneamente que su imagen se carga cuando no lo es.

Actualmente está disponible para D6 y D7

Drupal 6

Pruebe algo como esto en su documento jQuery listo

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

Pegue lo siguiente en page.tpl o node.tpl

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

No estoy familiarizado con ninguna forma de Drupal para lograr esto.

violín

Puedes lograrlo usando on(). delegate()ha quedado en desuso

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

Eche un vistazo al módulo de integración Plupload .

Proporciona integración entre el widget Plupload para cargar múltiples archivos y Drupal. Plupload es una herramienta de carga de múltiples archivos con licencia GPL que puede presentar widgets en Flash, Gears, HTML 5, Silverlight, BrowserPlus y HTML4 dependiendo de las capacidades de la computadora cliente.

Si usa el campo de carga de archivos en el formulario AJAX, después de enviarlo, puede perder la funcionalidad de carga automática (consulte https://drupal.stackexchange.com/a/31453/7313 )

Para solucionarlo, use este 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);