Як я можу автоматично завантажувати зображення під час вибору файлів, а не натискати кнопку завантаження?

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

Тип вмісту містить одне поле зображення. Це працює, але деякі користувачі не розуміють, що зображення було завантажено, оскільки вони не бачать його після вибору (для попереднього перегляду завантаження потрібно натиснути кнопку завантаження). Чи є спосіб пропустити / автоматично натиснути кнопку завантаження, щоб зображення було показане відразу після вибору файлу?

Іншими словами, одразу після вибору файлу замість наступного зображення (де шлях показано, але важко читати у 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().

ОНОВЛЕННЯ Я створив проект для пісочниці для цього модуля.

Для всіх, хто перебуває в цій ситуації, спробуйте скористатися модулем автозавантаження .

Автозавантаження - це вдосконалення інтерфейсу користувача (UI), яке ініціює автоматичне завантаження файлів, мінімізуючи кількість кліків, необхідних користувачеві.

В даний час користувачі повинні вибрати файли, а потім натиснути кнопку "Завантажити". Ми виявили, що користувачі часто не усвідомлюють необхідність натискання кнопок і помилково вважають, що їх зображення завантажено, коли це не так.

Наразі він доступний для D6 та D7

Друпал 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');

Мені незнайомий будь-який друпальський спосіб досягти цього.

скрипка

Ви можете досягти цього, використовуючи 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);