जावास्क्रिप्ट ईवेंट क्या होता है जब आप अपने डेस्कटॉप से ​​फ़ाइल को अपने ब्राउज़र पर खींचते हैं

Question

मैं जीमेल के समान फ़ाइल अपोलोड सिस्टम को कार्यान्वित करने की कोशिश कर रहा हूं। मैंने पहले ही सभी फाइलअपलोड/AJAX समस्या पूरी की है और यह सही काम करता है। मेरे पास एकमात्र समस्या है जो उपयोगकर्ता फ़ीडबैक है।

उदाहरण के लिए .. जीमेल में, जब आप अपने ब्राउज़र में फ़ाइल खींचते हैं (IE9 + उपयोगकर्ता मानते हैं), वहां एक ऐसा क्षेत्र है जो आपको पॉप-अप करने देता है, जिससे आप फ़ाइल को छोड़ देते हैं। मुझे लगता है कि यह किसी प्रकार का जावास्क्रिप्ट ईवेंट है एक ढांचे द्वारा कब्जा कर लिया (चलो Jquery कहते हैं), जो मुझे ड्रॉप क्षेत्र पर कुछ शांत एनिमेशन बनाने की अनुमति देता है।

मेरा प्रश्न सरल है .. मुझे ऐसा करने के लिए किस घटना को कैप्चर करना चाहिए? कोई विचार? क्या मैं इसे गलत कर रहा हूँ?

Answer 1

मुख्य कार्यक्रम केवल drop है।

आपको dragenter और dragleave को संभालने की भी आवश्यकता होगी अन्यथा ड्रॉप कार्रवाई केवल गिराए गए फ़ाइलों का भार उत्पन्न करेगी। आप वैकल्पिक रूप से dragover देख सकते हैं। इस मामले dragenter और dragleave संचालकों जब सामान यह में घसीटा जा रहा है सिर्फ ड्रॉप जोन का स्वरूप बदलने के लिए कर रहे हैं में

var $dz = $('#dropzone'); 
$dz.on({ 
    dragenter: dragenter, 
    dragleave: dragleave, 
    dragover: false, 
    drop: drop 
}); 

function dragenter() { 
    $dz.addClass('active'); 
}; 

function dragleave() { 
    $dz.removeClass('active'); 
}; 

function drop(e) { 
    var dt = e.originalEvent.dataTransfer; 
    if (dt) { 
     var files = dt.files; 
     ... 
    } 
    $dz.removeClass('active'); 
}; 

:

मैं कुछ कोड है कि इन संचालकों पंजीकृत करता है, तो तरह है।

Answer 2

इसे drop कहा जाता है, और ईवेंट ऑब्जेक्ट से आपको आवश्यक गुण मूल संपत्ति में होंगे।

$(element).on("drop",function(e){ 
    console.log(e.originalEvent) 
}); 

आप भी dragenter निकल और है कि एक ही तत्व पर dragleave को यह ड्रॉप ईवेंट सक्रिय करने के लिए, अगर मैं सही ढंग से याद की जरूरत है।

$(element).on("dragenter dragleave", false);