Как я могу автоматически загружать изображения при выборе файла, а не нажимать кнопку «Загрузить»?

У меня есть настраиваемый тип контента, позволяющий пользователям загружать изображения. Я стараюсь, чтобы интерфейс был как можно более простым.

Тип содержимого содержит одно поле изображения. Это работает, но некоторые пользователи не понимают, что изображение загружено, потому что они не видят его после выбора (для предварительного просмотра загрузки необходимо нажать кнопку загрузки). Есть ли способ пропустить /автоматически нажать кнопку загрузки, чтобы изображение отображалось сразу после выбора файла?

Другими словами, сразу после выбора файла вместо следующего изображения (где путь показан, но трудно читается в Firefox):

введите описание изображения здесь>> </p>

<p> Я бы хотел, чтобы экран предварительного просмотра отображался следующим образом:
<img src =

54 голоса | спросил Patrick Kenny 15 Mayam12 2012, 10:04:15

6 ответов


93

Вам лучше делать это на уровне модуля, а не на уровне темы, поскольку JS не будет действовать для страниц администрирования в противном случае (если, конечно, вы не используете одну и ту же тему для обоих).

Вот небольшой модуль для обеспечения этой функциональности в масштабах всей системы:

Файл: 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

Файл: 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);

Файл: auto_upload.module

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

После того, как вы установили модуль, все входные файлы, которые являются AJAX-ified (то есть те, у которых есть кнопка «Обновить»), будут затронуты ... вам больше не нужно будет нажать кнопку «Загрузить» после выбор файла.

Используя метод delegate() , он также отлично работает для полей файлов, которые позволяют несколько загрузок, а также для полей, загружаемых на страницу в результате запроса AJAX.

Я тестировал это в Chrome, Safari и Firefox, и он работает:)

Сноска . В (возможно, очень маловероятном) событии, которое ваш сайт использует jQuery 1.7, вы должны использовать on() , который имеет superseeded delegate().

ОБНОВЛЕНИЕ Я создал проект песочницы для этого модуля.

ответил Clive 17 Maypm12 2012, 20:47:48
12

Для тех, кто в этой ситуации, попробуйте использовать модуль AutoUpload .

  

AutoUpload - это усовершенствование пользовательского интерфейса (UI), которое инициирует автоматическую загрузку файлов, минимизирующих количество кликов, требуемых пользователем.

     

В настоящее время пользователи должны выбрать файлы, а затем нажать кнопку «Загрузить». Мы обнаружили, что пользователи часто не понимают, что нажатие кнопки необходимо и по ошибке думает, что их изображение загружено, когда это не так.

В настоящее время он доступен для D6 и D7

ответил Cardo 4 FebruaryEurope/MoscowbTue, 04 Feb 2014 01:56:21 +0400000000amTue, 04 Feb 2014 01:56:21 +040014 2014, 01:56:21
9

Drupal 6

Попробуйте что-то подобное в вашем готовом документе jQuery

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

Вставьте следующее в page.tpl или node.tpl

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

Я не знаком ни с каким способом Drupal для этого.

скрипка

ответил niksmac 15 Mayam12 2012, 10:50:03
5

Вы можете достичь этого, используя on(). delegate() устарел.

(function ($) {
  Drupal.behaviors.autoUpload = {
    attach: function (context, settings) {
      $('form', context).on('change', 'input.form-file', function() {  
        $(this).next('input[type="submit"]').mousedown();
      }); 
    }
  };
})(jQuery);
ответил drupal_stuff_alter 21 Jpm1000000pmMon, 21 Jan 2013 19:26:48 +040013 2013, 19:26:48
4

Взгляните на модуль интеграции Plupload .

  

Обеспечивает интеграцию для виджета Plupload для загрузки нескольких файлов и Drupal. Plupload - это лицензионный инструмент для загрузки нескольких файлов GPL, который может отображать виджеты в Flash, Gears, HTML 5, Silverlight, BrowserPlus и HTML4 в зависимости от возможностей клиентского компьютера.

ответил MotoTribe 20 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 20 Sep 2011 08:54:47 +0400 2011, 08:54:47
3

Если вы используете поле загрузки файла в форме AJAX - после его отправки вы можете потерять функцию автоматической загрузки (см. https: //drupal.stackexchange.com/a/31453/7313 )

Чтобы исправить - используйте этот скрипт

(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);
ответил Eugene Fidelin 12 J000000Thursday12 2012, 18:36:13

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132