Como posso carregar imagens automaticamente na seleção de arquivos, em vez de pressionar o botão de upload?

Eu tenho um tipo de conteúdo personalizado para permitir que os usuários enviem imagens. Estou tentando manter a interface o mais simples possível.

O tipo de conteúdo contém um único campo de imagem. Isso funciona, mas alguns usuários não entendem que a imagem foi carregada porque não a vê após a seleção (para visualizar o upload, o botão de upload deve ser pressionado). Existe uma maneira de pular / pressionar automaticamente o botão de upload para que uma imagem seja exibida imediatamente após a seleção de um arquivo?

Em outras palavras, imediatamente após a seleção de um arquivo, em vez da figura a seguir (onde o caminho é mostrado, mas difícil de ler no Firefox):

Eu gostaria que a exibição de visualização fosse mostrada assim:

É melhor fazer isso no nível do módulo, em vez do tema, pois o JS não terá efeito nas páginas de administração de outra forma (a menos que você esteja usando o mesmo tema para ambos).

Aqui está um pequeno módulo para fornecer essa funcionalidade em todo o sistema:

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

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

Arquivo: auto_upload.module

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

Depois de instalar o módulo, todas as entradas de arquivo negadas pelo AJAX (ou seja, aquelas que possuem um botão 'Atualizar') serão afetadas ... você não precisará mais pressionar o botão 'Enviar' depois de selecionar o arquivo .

Ao usar o delegate()método, isso também funcionará perfeitamente para campos de arquivos que permitem vários uploads e também para campos carregados na página como resultado de uma solicitação AJAX.

Eu testei isso no Chrome, Safari e Firefox e funciona muito bem :)

Nota de rodapé : No evento (provavelmente muito improvável) de seu site estar usando o jQuery 1.7, você deve usar o on()método que substituiu delegate().

ATUALIZAÇÃO Criei um projeto de sandbox para este módulo.

Para qualquer pessoa nessa situação, tente usar o módulo AutoUpload .

O AutoUpload é um aprimoramento da interface do usuário que inicia o upload automático de arquivos, minimizando o número de cliques exigidos por um usuário.

Atualmente, os usuários devem selecionar arquivos e pressionar o botão "Upload". Descobrimos que os usuários geralmente não percebem que é necessário pressionar o botão e pensam erroneamente que sua imagem é carregada quando não é.

Atualmente, está disponível para D6 e D7

Drupal 6

Tente algo parecido com isto no seu documento jQuery pronto

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

Cole o seguinte em page.tpl ou node.tpl

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

Não conheço nenhuma maneira Drupal de conseguir isso.

violino

Você pode conseguir usando on(). delegate()foi descontinuado.

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

Dê uma olhada no módulo de integração Plupload .

Fornece integração entre o widget Plupload para carregar vários arquivos e o Drupal. O Plupload é uma ferramenta de upload de vários arquivos licenciada pela GPL que pode apresentar widgets no Flash, Gears, HTML 5, Silverlight, BrowserPlus e HTML4, dependendo dos recursos do computador cliente.

Se você usar o campo de upload de arquivo no formulário AJAX - após o envio, poderá perder a funcionalidade de upload automático (consulte https://drupal.stackexchange.com/a/31453/7313 )

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