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


54

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

masukkan deskripsi gambar di sini

Saya ingin tampilan pratinjau ditampilkan seperti ini: masukkan deskripsi gambar di sini

Jawaban:


95

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.


1
Terima kasih atas sedikit tentang delegate (), pengetahuan yang sangat berguna!
Johnathan Elmore

@Clive sangat keren! Apakah Anda akan mempertimbangkan melepaskan ini sebagai kotak pasir? Jika tidak, keberatan jika saya lakukan?
Letharion

4
Saya akan memilih lagi jika saya bisa;) Untuk mencegah duplikasi usaha yang tidak perlu, saya hanya ingin menunjukkan bahwa ada juga Ajax , dan Ajax mengirimkan untuk bentuk apa pun , yang keduanya terkait.
Letharion

1
@Clive Kode berfungsi dengan baik jika saya memiliki modul Pembaruan jQuery diinstal (bahkan dengan versi jQuery diatur ke 1,7 tetapi masih dengan 'delegate' bukan 'on'). Namun, jika saya menonaktifkan modul Pembaruan jQuery maka unggahan otomatis dimulai tetapi tidak selesai, itu masuk ke proses unggah tanpa akhir. Bisakah Anda mengonfirmasi bahwa Pembaruan jQuery diperlukan?
deinqwertz

1
@deinqwertz Seharusnya tidak, delegate()ditambahkan dalam 1.4.2 dan Drupal 7 kapal dengan 1.4.4. Saya cukup yakin saya dapat berfungsi dengan baik di beberapa situs lama dengan stok jQuery terinstal
Clive

13

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


9

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


Sayangnya, saya tidak tahu cara menggunakan jQuery. Apakah ada cara lain untuk melakukan ini?
Patrick Kenny

@ Patrickricken, lihat edit saya. Saya tidak terbiasa dengan cara Drupal untuk mencapai ini.
niksmac

1
Anda harus mengganti $ dengan jQuery ... lihat jawaban Clive di bawah ini, atau cukup modifikasi di atas seperti ini: drupal_add_js ("jQuery (document) .ready (function () {jQuery ('. Form-file'). Ubah (fungsi () {jQuery (ini) .next ('. ahah-olahan'). klik ();});}); ", 'inline');
Johnathan Elmore

1
@ JohnathanElmore, ya itu tidak akan berfungsi di D7. Diedit
niksmac

1
@NikhilMohan Ada beberapa masalah lain: .ahah-processedadalah nama kelas Drupal 6, dan click()metode ini tidak benar-benar meminta klik pada tombol-tombol itu untuk beberapa alasan; Anda perlu menggunakan mousedown()sebagai gantinya :)
Clive

5

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

4

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.


3

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

Dalam kasus saya, itu menyebabkan formulir mengirim permintaan AJAX untuk bidang file terus-menerus di latar belakang. Plus, itu menunjukkan pemukul yang berdenyut di bidang yang kosong.
Елин Й.
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.