web-dev-qa-db-fra.com

Comment puis-je télécharger automatiquement des images sur la sélection de fichiers plutôt que d'appuyer sur le bouton de téléchargement?

J'ai un type de contenu personnalisé pour permettre aux utilisateurs de télécharger des images. J'essaie de garder l'interface aussi simple que possible.

Le type de contenu contient un seul champ d'image. Cela fonctionne, mais certains utilisateurs ne comprennent pas que l'image a été téléchargée car ils ne la voient pas après avoir sélectionné (pour prévisualiser le téléchargement, le bouton de téléchargement doit être enfoncé). Existe-t-il un moyen d'ignorer/d'appuyer automatiquement sur le bouton de téléchargement pour qu'une image s'affiche immédiatement après la sélection d'un fichier?

En d'autres termes, immédiatement après avoir sélectionné un fichier, au lieu de l'image suivante (où le chemin est affiché mais difficile à lire dans Firefox):

enter image description here

J'aimerais que l'aperçu s'affiche comme ceci: enter image description here

7media
53
Patrick Kenny

Vous feriez mieux de le faire au niveau du module, plutôt qu'au niveau du thème, car le JS ne prendra pas effet pour les pages d'administration sinon (à moins bien sûr que vous n'utilisiez le même thème pour les deux).

Voici un petit module pour fournir cette fonctionnalité à l'échelle du système:

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

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

Fichier: auto_upload.module 

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

Une fois que vous avez installé le module, toutes les entrées de fichier qui sont AJAX-ified (c'est-à-dire celles qui ont un bouton "Mettre à jour") seront affectées ... vous n'aurez plus besoin d'appuyer sur le bouton "Télécharger" après avoir sélectionné le fichier .

En utilisant la méthode delegate() , cela fonctionnera également parfaitement pour les champs de fichier qui autorisent plusieurs téléchargements, ainsi que pour les champs qui sont chargés dans la page à la suite d'un AJAX.

J'ai testé ça dans Chrome, Safari et Firefox et ça marche un régal :)

Footnote: Dans le cas (probablement très peu probable) où votre site utilise jQuery 1.7, vous devez utiliser la méthode on() , qui a dépassé delegate().

[~ # ~] mise à jour [~ # ~] J'ai créé un projet sandbox pour ce module.

94
Clive

Pour toute personne dans cette situation, essayez d'utiliser le module AutoUpload .

AutoUpload est une amélioration de l'interface utilisateur (UI) qui lance le téléchargement automatique des fichiers en minimisant le nombre de clics requis par un utilisateur.

Actuellement, les utilisateurs doivent sélectionner des fichiers, puis appuyez sur le bouton "Télécharger". Nous avons constaté que les utilisateurs ne réalisent souvent pas qu'une pression sur un bouton est nécessaire et pensent à tort que leur image est téléchargée alors qu'elle ne l'est pas.

Il est actuellement disponible pour D6 et D7

12
Cardo

Drupal 6

Essayez quelque chose comme ça dans votre document jQuery prêt

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

Collez ce qui suit dans page.tpl ou node.tpl

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

Je ne connais pas les moyens Drupal pour y parvenir).

violon

8
niksmac

Vous pouvez y parvenir en utilisant on(). delegate() est obsolète.

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

Jetez un œil au module intégration Plupload .

Fournit une intégration entre le widget Plupload pour télécharger plusieurs fichiers et Drupal. Plupload est un outil de téléchargement de fichiers multiples sous licence GPL qui peut présenter des widgets dans Flash, Gears, HTML 5, Silverlight, BrowserPlus et HTML4 selon les capacités de l'ordinateur client.

3
uwe

Si vous utilisez le champ de téléchargement de fichiers sur le formulaire AJAX - après sa soumission, vous risquez de perdre la fonctionnalité de téléchargement automatique (voir https://drupal.stackexchange.com/a/31453/731 )

Pour corriger - utilisez ce 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);
2
Eugene Fidelin