ฉันจะอัพโหลดรูปภาพโดยอัตโนมัติเมื่อเลือกไฟล์ได้อย่างไรแทนที่จะกดปุ่มอัพโหลด?

ฉันมีประเภทเนื้อหาที่กำหนดเองเพื่ออนุญาตให้ผู้ใช้อัปโหลดภาพ ฉันพยายามทำให้อินเทอร์เฟซเรียบง่ายที่สุดเท่าที่จะทำได้

ประเภทเนื้อหามีฟิลด์ภาพเดียว ใช้งานได้ แต่ผู้ใช้บางคนไม่เข้าใจว่าภาพถูกอัพโหลดเพราะพวกเขาไม่เห็นหลังจากเลือก (เพื่อดูตัวอย่างการอัปโหลดจะต้องกดปุ่มอัปโหลด) มีวิธีข้าม / กดปุ่มอัปโหลดโดยอัตโนมัติหรือไม่เพื่อให้ภาพปรากฏขึ้นทันทีหลังจากเลือกไฟล์หรือไม่?

กล่าวอีกนัยหนึ่งทันทีหลังจากเลือกไฟล์แทนที่จะเป็นรูปภาพต่อไปนี้ (ที่แสดงพา ธ แต่อ่านยากใน 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-ified (เช่นที่มีปุ่ม 'อัปเดต') จะได้รับผลกระทบ ... คุณไม่จำเป็นต้องกดปุ่ม 'อัปโหลด' อีกต่อไปหลังจากเลือกไฟล์แล้ว .

โดยใช้delegate()วิธีการนี้จะทำงานได้อย่างสมบูรณ์แบบสำหรับเขตข้อมูลไฟล์ที่อนุญาตให้อัปโหลดหลายครั้งและสำหรับเขตข้อมูลที่โหลดลงในหน้าอันเป็นผลมาจากการร้องขอ AJAX

ฉันได้ทำการทดสอบแล้วใน Chrome, Safari และ Firefox และใช้งานได้ดี :)

เชิงอรรถ : ใน (อาจจะไม่น่ามาก) เหตุการณ์ที่เว็บไซต์ของคุณใช้ jQuery 1.7 คุณควรใช้on()วิธีการซึ่งได้ delegate()superseeded

UPDATEฉันได้สร้างโครงการ sandboxสำหรับโมดูลนี้

สำหรับทุกคนภายใต้สถานการณ์นี้ลองใช้โมดูลAutoUpload

AutoUpload เป็นการปรับปรุงส่วนต่อประสานกับผู้ใช้ (UI) ที่เริ่มต้นการอัพโหลดไฟล์โดยอัตโนมัติเพื่อลดจำนวนการคลิกที่ผู้ใช้ต้องการ

ขณะนี้ผู้ใช้ต้องเลือกไฟล์จากนั้นกดปุ่ม "อัปโหลด" เราพบว่าผู้ใช้มักไม่รู้ตัวว่ามีความจำเป็นต้องกดปุ่มและคิดว่าภาพของพวกเขาถูกอัพโหลดเมื่อมันไม่ได้ตั้งใจ

ปัจจุบันมีให้บริการสำหรับ 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);