Bagaimana saya dapat secara otomatis mengunggah gambar pada pemilihan file daripada menekan tombol unggah?

Saya memiliki jenis konten khusus untuk memungkinkan pengguna mengunggah gambar. Saya mencoba untuk menjaga antarmuka sesederhana mungkin.

Jenis konten berisi bidang gambar tunggal. Ini berfungsi, tetapi beberapa pengguna tidak mengerti bahwa gambar telah diunggah karena mereka tidak melihatnya setelah memilih (untuk melihat pratinjau unggahan, tombol unggah harus ditekan). Apakah ada cara untuk melewati / secara otomatis menekan tombol unggah sehingga gambar segera ditampilkan setelah file dipilih?

Dengan kata lain, segera setelah memilih file, alih-alih gambar berikut (tempat jalur ditampilkan tetapi sulit dibaca di Firefox):

Saya ingin tampilan pratinjau ditampilkan seperti ini:

Anda akan lebih baik melakukan ini di tingkat modul, daripada tingkat tema, karena JS tidak akan berlaku untuk halaman admin sebaliknya (kecuali tentu saja Anda menggunakan tema yang sama untuk keduanya).

Berikut adalah modul kecil untuk menyediakan fungsionalitas ini di seluruh sistem:

File: 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

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

File: auto_upload.module

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

Setelah Anda menginstal modul, semua input file yang di-AJAX-ified (yaitu yang memiliki tombol 'Perbarui') akan terpengaruh ... Anda tidak perlu menekan tombol 'Unggah' lagi setelah memilih file .

Dengan menggunakan delegate()metode ini, ini juga akan berfungsi dengan sempurna untuk bidang file yang memungkinkan banyak unggahan, dan juga untuk bidang yang dimuat ke halaman sebagai hasil permintaan AJAX.

Saya sudah mengujinya di Chrome, Safari, dan Firefox dan itu berhasil :)

Catatan Kaki : Dalam acara (mungkin sangat tidak mungkin) bahwa situs Anda menggunakan jQuery 1.7, Anda harus menggunakan on()metode ini, yang telah melampaui kecepatan delegate().

PEMBARUAN Saya telah membuat proyek kotak pasir untuk modul ini.

Bagi siapa pun yang berada dalam situasi ini, coba gunakan modul AutoUpload .

AutoUpload adalah peningkatan antarmuka pengguna (UI) yang memulai unggahan file secara otomatis meminimalkan jumlah klik yang diperlukan oleh pengguna.

Saat ini, pengguna harus memilih file, lalu tekan tombol "Unggah". Kami mendapati pengguna sering tidak menyadari bahwa penekanan tombol diperlukan dan secara keliru mengira gambar mereka diunggah padahal sebenarnya tidak.

Saat ini tersedia untuk D6 dan D7

Drupal 6

Cobalah sesuatu seperti ini di dokumen jQuery Anda

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

Rekatkan yang berikut di page.tpl atau node.tpl

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

Saya tidak terbiasa dengan cara Drupal untuk mencapai ini.

biola

Anda dapat mencapainya menggunakan on(). delegate()telah ditinggalkan.

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

Lihatlah modul integrasi Plupload .

Menyediakan integrasi antara widget Plupload untuk mengunggah banyak file dan Drupal. Plupload adalah alat pengunggah banyak file berlisensi GPL yang dapat menyajikan widget di Flash, Gears, HTML 5, Silverlight, BrowserPlus, dan HTML4 tergantung pada kemampuan komputer klien.

Jika Anda menggunakan bidang unggah file pada formulir AJAX - setelah mengirimkannya, Anda dapat kehilangan fungsionalitas unggah otomatis (lihat https://drupal.stackexchange.com/a/31453/7313 )

Untuk memperbaiki - gunakan skrip ini

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