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


54

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

insira a descrição da imagem aqui

Eu gostaria que a exibição de visualização fosse mostrada assim: insira a descrição da imagem aqui

Respostas:


95

É 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.


11
Obrigado pelo pouco sobre delegate (), conhecimento muito útil!
Johnathan Elmore

@ Clive muito legal! Você considerará liberar isso como uma caixa de areia? Se não, importa se eu fizer?
Letharion

4
Eu votaria novamente se pudesse;) Para evitar a duplicação desnecessária de esforços, quero apenas salientar que também existe o Ajax , e o Ajax envia para qualquer formulário , sendo alguns relacionados.
Letharion

11
@Clive O código funciona perfeitamente se eu tiver o módulo jQuery Update instalado (mesmo com a versão do jQuery definida como 1.7, mas ainda com 'delegate' em vez de 'on'). No entanto, se eu desabilitar o módulo jQuery Update, o upload automatizado será iniciado, mas não será concluído, entrando em um processo de upload interminável. Você pode confirmar que a atualização do jQuery é necessária?
214133 Deinqwertz

11
@deinqwertz Não deveria ser, delegate()foi adicionado no 1.4.2 e o Drupal 7 foi lançado com o 1.4.4. Eu tenho certeza que eu tenho esta multa trabalhando em um par de sites antigos com o estoque jQuery instalado
Clive

13

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


9

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


Infelizmente, não sei como usar o jQuery. Há outra maneira de fazer isso?
Patrick Kenny

@PatrickKenny, veja minha edição. Não conheço nenhuma maneira Drupal de conseguir isso.
Niksmac 16/05

11
Você deve substituir o $ pelo jQuery ... veja a resposta de Clive abaixo ou apenas modifique os itens acima desta forma: drupal_add_js ("jQuery (documento) .ready (function () {jQuery ('. Form-file'). Change (function () {jQuery (this) .next ('. ahah-processado'). click ();});}); ", 'inline');
Johnathan Elmore

11
@JohnathanElmore, sim, não funcionará no D7. Editado
niksmac

11
@NikhilMohan Existem outros problemas: .ahah-processedé o nome de uma classe Drupal 6 e o click()método não invoca um clique nesses botões por algum motivo; você precisa usar em mousedown()vez disso :)
Clive

5

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

4

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.


3

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

No meu caso, ele fez com que o formulário envie solicitações AJAX para os campos do arquivo constantemente em segundo plano. Além disso, mostra um throbber de carregamento em um campo vazio.
Елин Й.
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.