फ़ाइल को खींचें और छोड़ें

Question

मैं <input type="file" /> HTML टैग का उपयोग कर अपने वेब एप्लिकेशन में फ़ाइल अपलोडिंग का उपयोग कर रहा हूं। मेरी सुविधा फ़ाइल चयनकर्ता से फ़ाइल चुनने और फ़ाइल सबमिट करने के साथ अच्छी तरह से काम करती है, हालांकि अब मैं ड्रैग और ड्रॉप ईवेंट पर एक फ़ाइल अपलोड करना चाहता हूं यानी उपयोगकर्ता अपने कंप्यूटर पर किसी स्थान से फ़ाइल खींचता है और जब वह इसे किसी विशेष रूप से छोड़ देता है मेरे वेब पेज में सेक्शन, फाइल अपलोड करना शुरू हो जाती है।

अब तक मैं द्वारा

function drop(evt) 
    { 
     evt.stopPropogation(); 
      evt.preventDefault(); 

     if (containsFiles(evt)) 
     { 
     var files = evt.dataTransfer.files; 
     var count = files.length; 

     // Only call the handler if 1 or more files was dropped. 
     if (count > 0) 
      // upload files 
     } 
     } 
    } 

ड्रॉप घटना से फ़ाइलों को पढ़ने में कामयाब रहे, लेकिन मैं इन फ़ाइलों को कैसे अपलोड कर सकते हैं? मैं सुरक्षा कारणों से इनपुट प्रकार = फ़ाइल के मान को नहीं बदल सकता। तो मैं इन फ़ाइलों को अपने सर्वलेट में पास करने के लिए क्या कर सकता हूं?

Answer 1

आपको FormData (आईई समर्थन से सावधान रहना) का उपयोग करना होगा।

जब ड्रॉप होता है आप FormData वस्तु बनाने, और इसे में डेटा संलग्न है, तो पोस्ट कि आपके यूआरएल को बनाने के लिए की जरूरत है। यह असीमित विधि है और आपके पृष्ठ को पुनः लोड नहीं करेगा।

function drop(evt) { 
    evt.stopPropogation(); 
    evt.preventDefault(); 

    var files = evt.dataTransfer.files; 
    if (files.length > 0) { 
    var form = new FormData(); 

    for(var i = 0; i < files.length; ++i) { 
     var file = evt.dataTransfer.files[i]; 
     form.append('image_' + i, file, file.name); 
    } 

    var req = new XMLHttpRequest(); 
    req.open('POST', '/pathToPostData', true); 
    req.onload = function(evt) { 
     console.log(req.responseText); 
    } 
    req.send(form); 
    } 
} 

खबरदार कि मैं इसे केवल क्रोम और फ़ायरफ़ॉक्स में परीक्षण किया है, IE9 शायद काम नहीं करेगा लेकिन IE10 चाहिए, यदि आप इसे परीक्षण, हमें कृपया हमें बताएं।

Answer 2

मेरा मानना ​​है कि आप Dropzone.js

मैं अभी तक इसे करने की कोशिश नहीं की है, पसंद में कुछ चाहते हैं, लेकिन यह एक पुस्तकालय है कि आसान फ़ाइलों की है कि यह चल रहा है एक वेबसाइट के लिए खींचें और ड्रॉप के लिए अनुमति देता है, v3.0 jQuery का उपयोग करने की आवश्यकता के बिना आता है।