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

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

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

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

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

Лучше делать это на уровне модуля, а не на уровне темы, так как в противном случае 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().

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

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

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

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

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

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

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

Вы можете достичь этого, используя 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);

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

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

Если вы используете поле загрузки файла в форме 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);