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


54

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

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

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

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

Я бы хотел, чтобы предварительный просмотр отображался так: введите описание изображения здесь

Ответы:


95

Лучше делать это на уровне модуля, а не на уровне темы, так как в противном случае 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-формат (т. Е. Те, которые имеют кнопку «Обновить») ... вам больше не нужно нажимать кнопку «Загрузить» после выбора файла ,

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

Я проверял это в Chrome, Safari и Firefox, и это работает удовольствие :)

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

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


1
Спасибо за немного о делегате (), очень полезные знания!
Джонатан Элмор

@ Клайв действительно круто! Будете ли вы рассматривать выпуск в качестве песочницы? Если нет, возражаешь, если я это сделаю?
Летарион

4
Я бы снова проголосовал, если бы мог;) Чтобы предотвратить ненужное дублирование усилий, я просто хочу указать, что есть также Ajax , и Ajax отправляют для любой формы , обе из которых связаны.
Летарион

1
@Clive Код работает отлично, если у меня установлен модуль обновления jQuery (даже с версией jQuery, установленной на 1.7, но с «делегатом» вместо «вкл»). Тем не менее, если я отключу модуль jQuery Update, автоматическая загрузка начнется, но не закончится, она перейдет в бесконечный процесс загрузки. Можете ли вы подтвердить, что требуется обновление jQuery?
deinqwertz

1
@deinqwertz Не должно быть, delegate()был добавлен в 1.4.2 и Drupal 7 с 1.4.4. Я почти уверен, что у меня это работает нормально на паре старых сайтов с установленным стоковым jQuery
Клайв

13

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

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

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

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


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 для достижения этой цели.

играть на скрипке


К сожалению, я не знаю, как использовать jQuery. Есть ли другой способ сделать это?
Патрик Кенни

@PatrickKenny, посмотрите мои изменения. Я не знаю ни о каком способе Drupal для достижения этой цели.
Никсмак

1
Вам следует заменить $ на jQuery ... см. Ответ Клайва ниже, или просто измените приведенное выше, например: drupal_add_js ("jQuery (document) .ready (function () {jQuery ('. Form-file'). Change (function) () {jQuery (this) .next ('. ahah-processing'). click ();});}); ", 'inline');
Джонатан Элмор

1
@JohnathanElmore, да, это не будет работать в D7. Отредактировано
niksmac

1
@NikhilMohan Есть несколько других проблем: .ahah-processedэто имя класса Drupal 6, и click()метод по какой-то причине не вызывает нажатия на эти кнопки; вы должны использовать mousedown()вместо этого :)
Клайв

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

4

Посмотрите на модуль интеграции Plupload .

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


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

В моем случае это заставило форму отправлять запросы AJAX для полей файла постоянно в фоновом режиме. Кроме того, он показывает загрузчик в пустом поле.
Елин Й.
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.