Làm cách nào tôi có thể tự động tải lên hình ảnh trên lựa chọn tập tin thay vì nhấn nút tải lên?

Tôi có một loại nội dung tùy chỉnh để cho phép người dùng tải lên hình ảnh. Tôi đang cố gắng để giữ cho giao diện đơn giản nhất có thể.

Loại nội dung chứa một trường hình ảnh duy nhất. Điều này hoạt động, nhưng một số người dùng không hiểu rằng hình ảnh đã được tải lên vì họ không nhìn thấy nó sau khi chọn (để xem trước tải lên, phải nhấn nút tải lên). Có cách nào để bỏ qua / tự động nhấn nút tải lên để hình ảnh được hiển thị ngay sau khi tệp được chọn không?

Nói cách khác, ngay sau khi chọn một tệp, thay vì hình ảnh sau (nơi đường dẫn được hiển thị nhưng khó đọc trong Firefox):

Tôi muốn màn hình xem trước được hiển thị như thế này:

Bạn nên làm điều này tốt hơn ở cấp độ mô-đun, thay vì cấp độ chủ đề, vì JS sẽ không có hiệu lực đối với các trang quản trị (trừ khi tất nhiên bạn đang sử dụng cùng một chủ đề cho cả hai).

Đây là một mô-đun nhỏ để cung cấp chức năng này cho toàn hệ thống:

Tệp: 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

Tệp: 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);

Tệp: auto_upload.module

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

Khi bạn đã cài đặt mô-đun, tất cả các đầu vào tệp là AJAX-ified (tức là những đầu vào có nút 'Cập nhật') sẽ bị ảnh hưởng ... bạn sẽ không cần nhấn nút 'Tải lên' nữa sau khi chọn tệp .

Bằng cách sử dụng delegate()phương thức này, nó cũng sẽ hoạt động hoàn hảo cho các trường tệp cho phép nhiều tải lên và cũng cho các trường được tải vào trang do kết quả của yêu cầu AJAX.

Tôi đã thử nghiệm điều đó trong Chrome, Safari và Firefox và nó hoạt động rất tốt :)

Lưu ý : Trong trường hợp (có lẽ rất khó xảy ra) rằng trang web của bạn đang sử dụng jQuery 1.7, bạn nên sử dụng on()phương thức đã được siêu thực delegate().

CẬP NHẬT Tôi đã tạo một dự án hộp cát cho mô-đun này.

Đối với bất kỳ ai trong tình huống này, hãy thử sử dụng mô-đun AutoUpload .

AutoUpload là một cải tiến giao diện người dùng (UI) để bắt đầu tự động tải lên các tệp giúp giảm thiểu số lần nhấp mà người dùng yêu cầu.

Hiện tại, người dùng phải chọn tệp, sau đó nhấn nút "Tải lên". Chúng tôi thấy người dùng thường không nhận ra việc nhấn nút là cần thiết và nhầm tưởng rằng hình ảnh của họ được tải lên khi không.

Nó hiện có sẵn cho D6 và D7

Drupal 6

Hãy thử một cái gì đó như thế này trong tài liệu jQuery của bạn đã sẵn sàng

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

Dán sau đây trong page.tpl hoặc node.tpl

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

Tôi không quen thuộc với bất kỳ cách Drupal nào để đạt được điều này.

vĩ cầm

Bạn có thể đạt được nó bằng cách sử dụng on(). delegate()đã bị phản đối

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

Hãy xem mô-đun tích hợp Plupload .

Cung cấp tích hợp giữa cho tiện ích Plupload để tải lên nhiều tệp và Drupal. Plupload là một công cụ tải lên nhiều tệp được cấp phép GPL có thể trình bày các widget trong Flash, Gears, HTML 5, Silverlight, BrowserPlus và HTML4 tùy thuộc vào khả năng của máy khách.

Nếu bạn sử dụng trường tải lên tệp trên biểu mẫu AJAX - sau khi gửi, bạn có thể mất chức năng tự động tải lên (xem https://drupal.stackexchange.com/a/31453/7313 )

Để khắc phục - sử dụng tập lệnh này

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