मैं एक इनपुट तत्व के लिए ड्रैग एंड ड्रॉप फ़ाइल अपलोडिंग को कार्यान्वित कर रहा हूं लेकिन मुझे ड्रॉप इवेंट को संभालने में कुछ कठिनाई है। मेरे पास निम्न एचटीएमएल है:

<label for="input" id="label" ondrop="handleDrop(event)">
    <input id="input" type="file" name="file"/>
    <span>Choose a file or drag it here.</span>
</label>

और निम्नलिखित जेएस:

let label = document.getElementById('label');
let input = document.getElementById('input');
label.addEventListener('drop', handleDrop);
input.addEventListener('change', handleChange);

function handleDrop(e) {
    e.preventDefault();
    let file = e.dataTransfer.files;
    console.log(file);
    //and now?
}

function handleChange(e) {
    //default not overwritten
    let fileName = e.target.value.split('\\').pop();
    if (fileName) {
        input.nextElementSibling.innerHTML = fileName;
    }
}

जब मैं इनपुट पर क्लिक करता हूं और फ़ाइल के लिए ब्राउज़ करता हूं तो एक 'परिवर्तन' ईवेंट निकाल दिया जाता है, टेक्स्ट अपलोड की गई फ़ाइल पर सेट हो जाता है और 'फ़ाइल' विशेषता इस फ़ाइल पर सेट हो जाती है। मैं वही होना चाहता हूं जब लेबल पर कोई फ़ाइल छोड़ी जाती है लेकिन मुझे नहीं पता कि यह कैसे करना है। मैं input.dispatchEvent(new Event('change')) का उपयोग कर सकता हूं लेकिन वह उस फ़ाइल को डिलीवर नहीं करेगा जो इनपुट की फ़ाइल विशेषता में छोड़ी गई है।

हो सकता है कि मैं इस समस्या को गलत तरीके से सोच रहा हूं और ऐसा करने का एक बेहतर विकल्प है, लेकिन जब मैं सबमिट बटन पर क्लिक करता हूं तो अंतिम लक्ष्य फ़ाइल को मेरे सर्वर पर भेजना होता है। (मैं स्प्रिंग एमवीसी का उपयोग उस तरह से करता हूं जहां फ़ाइल @RequestParam("file") Multipartfile file का उपयोग करके पकड़ी जाती है।)

कोई भी मदद बहुत ही सराहनीय होगी :)

0
Mathijn 24 अक्टूबर 2019, 15:20

1 उत्तर

सबसे बढ़िया उत्तर

स्पष्ट रूप से मैं जो करने की कोशिश कर रहा हूं वह असंभव है क्योंकि input type="file" की फ़ाइल विशेषता सुरक्षा कारणों से केवल पढ़ने के लिए है। ऐसा करने का उचित तरीका शायद फ़ाइल को सीधे एमवीसी को भेजना होगा।

0
Mathijn 30 अक्टूबर 2019, 13:08