मैं अपलोड बटन दबाने के बजाय फ़ाइल चयन पर छवियों को स्वचालित रूप से कैसे अपलोड कर सकता हूं?

Question

मेरे पास उपयोगकर्ताओं को चित्र अपलोड करने की अनुमति देने के लिए एक कस्टम सामग्री प्रकार है। मैं इंटरफ़ेस को यथासंभव सरल रखने की कोशिश कर रहा हूं।

सामग्री प्रकार में एक एकल छवि फ़ील्ड शामिल है। यह काम करता है, लेकिन कुछ उपयोगकर्ता यह नहीं समझते हैं कि छवि अपलोड की गई है क्योंकि वे इसे चुनने के बाद नहीं देखते हैं (अपलोड का पूर्वावलोकन करने के लिए, अपलोड बटन दबाया जाना चाहिए)। क्या अपलोड बटन को स्वचालित रूप से छोड़ने / स्वचालित रूप से दबाने का एक तरीका है ताकि किसी फ़ाइल के चयन के तुरंत बाद एक छवि दिखाई जाए?

दूसरे शब्दों में, निम्नलिखित चित्र के बजाय एक फ़ाइल का चयन करने के तुरंत बाद (जहां पथ दिखाया गया है लेकिन फ़ायरफ़ॉक्स में पढ़ने के लिए कठिन है):

मैं इस तरह दिखाया जाने वाला पूर्वावलोकन प्रदर्शन पसंद करूंगा:

Answer 1

आप थीम स्तर के बजाय मॉड्यूल स्तर पर ऐसा करना बेहतर समझेंगे, क्योंकि जेएस व्यवस्थापक पृष्ठों के लिए अन्यथा प्रभावी नहीं होगा (जब तक कि आप दोनों के लिए एक ही विषय का उपयोग नहीं कर रहे हैं)।

इस कार्यक्षमता प्रणाली को प्रदान करने के लिए एक छोटा मॉड्यूल यहाँ दिया गया है:

फाइल: 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 अनुरोध के परिणामस्वरूप पृष्ठ में लोड किए जाते हैं।

मैंने क्रोम, सफारी और फ़ायरफ़ॉक्स में परीक्षण किया है और यह एक इलाज का काम करता है :)

फुटनोट : आपकी साइट jQuery 1.7 का उपयोग कर रही है (शायद बहुत संभावना नहीं है) घटना में, आपको उस on()विधि का उपयोग करना चाहिए , जिसने सुपरसीड किया है delegate()।

अद्यतन मैंने इस मॉड्यूल के लिए एक सैंडबॉक्स प्रोजेक्ट बनाया है ।

Comments

प्रतिनिधि के बारे में बिट के लिए धन्यवाद (), बहुत उपयोगी ज्ञान!

— जॉनाथन एलमोर

@ बहुत अच्छा कूल! क्या आप इसे सैंडबॉक्स के रूप में जारी करने पर विचार करेंगे? अगर नहीं, तो अगर मैं करूँ तो मन?

— प्रात:

यदि मैं कर सकता हूं तो मैं फिर से उत्थान करूंगा;) प्रयास के अनावश्यक दोहराव को रोकने के लिए, मैं केवल यह बताना चाहता हूं कि अजाक्स भी है , और अजाक्स किसी भी रूप के लिए प्रस्तुत है , जो दोनों कुछ संबंधित हैं।

— प्रात:

@Clive कोड पूरी तरह से काम करता है अगर मेरे पास jQuery अपडेट मॉड्यूल स्थापित है (यहां तक ​​कि jQuery संस्करण 1.7 के लिए सेट है, लेकिन फिर भी 'डेलिगेट' के बजाय 'ऑन' के साथ)। हालाँकि, अगर मैं jQuery के अपडेट मॉड्यूल को अक्षम करता हूं तो स्वचालित अपलोड शुरू हो जाता है लेकिन समाप्त नहीं होता है, यह एक अंतहीन अपलोड प्रक्रिया में चला जाता है। क्या आप पुष्टि कर सकते हैं कि jQuery अपडेट की आवश्यकता है?

— डिंक्वेर्ट्ज़

@deinqwertz नहीं होना चाहिए, delegate()1.4.2 में जोड़ा गया और ड्रुपल 7 जहाजों को 1.4.4 के साथ जोड़ा गया। मैं बहुत यकीन है कि मैं स्थापित शेयर jQuery के साथ पुराने साइटों के एक जोड़े पर इस काम कर ठीक है कर रहा हूँ

— क्लाइव

Answer 2

इस स्थिति में किसी के लिए, AutoUpload मॉड्यूल का उपयोग करने का प्रयास करें ।

AutoUpload एक उपयोगकर्ता इंटरफ़ेस (UI) एन्हांसमेंट है जो किसी उपयोगकर्ता द्वारा आवश्यक क्लिकों की संख्या को कम करने वाली फ़ाइलों के स्वचालित अपलोड को आरंभ करता है।

वर्तमान में, उपयोगकर्ताओं को फ़ाइलों का चयन करना होगा, फिर "अपलोड" बटन दबाएं। हमने पाया कि उपयोगकर्ताओं को अक्सर महसूस नहीं होता है कि एक बटन प्रेस आवश्यक है और गलती से लगता है कि जब उनकी छवि अपलोड नहीं हुई है।

यह वर्तमान में D6 और D7 के लिए उपलब्ध है

Answer 3

द्रुपाल ६

अपने 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 तरीके के बारे में अपरिचित हूं।

बेला

Comments

दुर्भाग्य से, मुझे नहीं पता कि jQuery का उपयोग कैसे करना है। क्या इसे करने का और कोई तरीका है?

— पैट्रिक केनी

@PatrickKenny, मेरा संपादन देखें। मैं इसे प्राप्त करने के लिए किसी भी Drupal तरीके के बारे में अपरिचित हूं।

— निकमासैक

आपको jQuery के साथ $ को प्रतिस्थापित करना चाहिए ... नीचे क्लाइव का उत्तर देखें, या बस इस तरह से ऊपर संशोधित करें: drupal_add_js ("jQuery (दस्तावेज़)। .रेड (फ़ंक्शन) ({jQuery ('। Form-file')। फ़ंक्शन (फ़ंक्शन)। () {jQuery (यह) .next ('। ahah-प्रसंस्कृत')। क्लिक करें ();};};}}; "," इनलाइन ');

— जॉनाथन एलमोर

@ जोनाथन एलमोर, हाँ यह डी 7 में काम नहीं करेगा। संपादित

— niksmac

@ निखिलमोहन कुछ अन्य समस्याएं हैं: .ahah-processedएक ड्रुपल 6 वर्ग का नाम है, और यह click()विधि वास्तव में किसी कारण से उन बटनों पर क्लिक को लागू नहीं करती है; आप उपयोग करने की आवश्यकता mousedown()के बजाय :)

— क्लाइव

Answer 4

आप इसका उपयोग करके प्राप्त कर सकते हैं 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);

Answer 5

प्लूपलोड एकीकरण मॉड्यूल पर एक नज़र डालें ।

कई फ़ाइलों और Drupal अपलोड करने के लिए Plupload विजेट के बीच एकीकरण प्रदान करता है । Plupload एक GPL लाइसेंस प्राप्त कई फ़ाइल अपलोड करने वाला टूल है जो क्लाइंट कंप्यूटर की क्षमताओं के आधार पर Flash, Gears, HTML 5, Silverlight, BrowserPlus, और HTML4 में विजेट प्रस्तुत कर सकता है।

Answer 6

यदि आप 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);

Comments

मेरे मामले में, इसने पृष्ठभूमि में लगातार फ़ाइल फ़ील्ड के लिए AJAX अनुरोध भेजने का कारण बना। साथ ही, यह एक खाली मैदान पर एक लोडिंग थ्रोबर दिखाता है।

— Елин Й