Resimleri yükle düğmesine basmak yerine otomatik olarak dosya seçimine nasıl yükleyebilirim?

Kullanıcıların resim yüklemesine izin vermek için özel bir içerik türüm var. Arayüzü mümkün olduğunca basit tutmaya çalışıyorum.

İçerik türü, tek bir görüntü alanı içerir. Bu işe yarar, ancak bazı kullanıcılar görüntünün yüklendiğini anlamazlar çünkü seçtikten sonra görmezler (yüklemeyi önizlemek için yükleme düğmesine basılmalıdır). Bir dosya seçildikten hemen sonra bir resmin gösterilmesi için yükleme düğmesine atlamanın / otomatik olarak basmanın bir yolu var mı?

Başka bir deyişle, bir dosyayı seçtikten hemen sonra , aşağıdaki resim yerine (yolun gösterildiği ancak Firefox'ta okunması zor olan):

Önizleme ekranının şöyle gösterilmesini istiyorum:

JS, yönetici sayfaları için geçerli olmayacağından, tema seviyesi yerine modül düzeyinde yapmaktan daha iyi olurdu (elbette her ikisi için de aynı temayı kullanmıyorsanız).

Sistem genelinde bu işlevselliği sağlamak için küçük bir modül:

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

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

Dosya: auto_upload.module

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

Modülü kurduğunuzda, AJAX-ified olan tüm dosya girişleri (yani 'Güncelle' düğmesine sahip olanlar) etkilenir ... dosyayı seçtikten sonra 'Yükle' düğmesine basmanız gerekmez. .

Bu, delegate()yöntemi kullanarak, birden fazla yüklemeye izin veren dosya alanları ve ayrıca AJAX isteğinin sonucu olarak sayfaya yüklenen alanlar için de mükemmel şekilde çalışacaktır.

Bunu Chrome, Safari ve Firefox'ta test ettim ve bu bir zevk çalışıyor :)

Dipnot : Sitenizin jQuery 1.7 kullandığı (muhtemelen çok olası olmayan) etkinlikte, yerine geçen on()yöntemi kullanmanız gerekir delegate().

GÜNCELLEME Bu modül için bir sanal proje oluşturdum .

Bu durumda olan herkes için AutoUpload modülünü kullanmayı deneyin .

Otomatik Güncelleme, kullanıcının ihtiyaç duyduğu tıklama sayısını en aza indiren dosyaların otomatik olarak yüklenmesini başlatan bir kullanıcı arabirimi (UI) geliştirmesidir.

Şu anda, kullanıcıların dosyaları seçmesi ve ardından "Yükle" düğmesine basması gerekiyor. Kullanıcıların sık sık bir düğmeye basmanın gerekli olduğunu anlamadıklarını ve yanlışlıkla görüntülerinin yüklenmediğini düşündüklerini gördük.

D6 ve D7 için şu anda mevcut

Drupal 6

JQuery belgenizde böyle bir şey hazır deneyin

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

Aşağıdakini page.tpl veya node.tpl içine yapıştırın

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

Bunu başarmanın herhangi bir Drupal yolunu bilmiyorum.

keman

Bunu kullanarak elde edebilirsiniz on(). delegate()kullanımdan kaldırıldı.

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

Plupload entegrasyon modülüne bir bakın .

Birden fazla dosya yüklemek için Plupload widget ile Drupal arasında entegrasyon sağlar . Plupload, istemci bilgisayarın özelliklerine bağlı olarak Flash, Gears, HTML 5, Silverlight, BrowserPlus ve HTML4'te widget sunabilen bir GPL lisanslı çoklu dosya yükleme aracıdır.

AJAX formunda dosya yükleme alanını kullanıyorsanız - gönderdikten sonra otomatik yükleme işlevini kaybedebilirsiniz (bkz. Https://drupal.stackexchange.com/a/31453/7313 )

Düzeltmek için - bu betiği kullanın

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