दिलचस्प पोस्ट
<My code> में त्रुटि: असाइनमेंट का लक्ष्य गैर-भाषा ऑब्जेक्ट का विस्तार करता है Php के साथ एक फाइल खोलना एक्सप्रेस में व्यू इंजन के रूप में मैं HTML का उपयोग कैसे करूं? पाठ पर आधारित jQuery का चयन करें जावास्क्रिप्ट का उपयोग करके लोकेल लघु दिनांक प्रारूप प्राप्त करें प्रोटोमज में तत्व दृश्यता के लिए कैसे इंतजार करना द्विपक्षीय जेपीए वनटॉमी / कई टीओओन एसोसिएशन में, "संघ के व्यस्त पक्ष" का क्या मतलब है? एंड्रॉइड स्थिर वस्तु जीवनचक्र मैं एक नौकरी की स्थिति कैसे तय कर सकता हूं? सी + +: लाँगजम्प और सेटजेम्प का उपयोग करने के लिए सुरक्षित? स्क्रिप्ट टैग का संदर्भ किस प्रकार किया जा सकता है जो वर्तमान में क्रियान्वित स्क्रिप्ट को लोड करता है? मुझे jquery मोबाइल में index.html को सारी स्क्रिप्ट क्यों डालनी है क्या वीबी.नेट में एक सशर्त त्रिगुट ऑपरेटर है? खुले xml एक्सेल सेल सेल पढ़ें कॉलिंग पद्धति के बारे में जानकारी प्राप्त करने के लिए उत्पादन कोड में PHP debug_backtrace?

फ़ाइल इनपुट वैल्यू को प्रोग्रामैटिक रूप से कैसे सेट करें (यानी: ड्रैग-ड्रॉपिंग फाइलें)?

मैं एक नियंत्रण बनाने का प्रयास कर रहा हूं जहां आप दोनों फॉर्म को सबमिट करने के लिए एक फ़ाइल का चयन कर सकते हैं और एक ही बात करने के लिए उसमें एक फ़ाइल ड्रॉप कर सकते हैं मेरे पास ऐसा कुछ है जहां यह फ़ाइल का एक पूर्वावलोकन भी दिखाएगा यदि यह एक छवि है:

<div class="preview-image-container" style="cursor: default;"> <input type="file" name="File" id="File" class="form-control" accept="image/*" style="display:none;"> <div class="preview-image-dummy"></div><img class="preview-image-url"> <div class="preview-image-instruction" style="background-color: inherit; cursor: default;"><i class="fa fa-4x fa-cloud-upload" aria-hidden="true"></i> <div class="preview-image-btn-browse btn btn-primary">Select file</div> <p>or drop it here.</p> </div> </div> 

उपयोगकर्ता फ़ाइल को पूर्वावलोकन-छवि-कंटेनर में छोड़ देता है फाइल एजेएक्स के साथ जमा नहीं की गई है, उपयोगकर्ता को उस फॉर्म को जमा करना होगा जिसमें अधिक डेटा शामिल है।

सुरक्षा कारणों से, हमें जावास्क्रिप्ट के साथ इनपुट फ़ाइल का मान बदलने की अनुमति नहीं है। हालांकि, मुझे पता है कि डिफ़ॉल्ट इनपुट फ़ाइल का समर्थन ड्रॉपपॉइसबल है और ऐसी वेबसाइट्स का एक समूह है जो हमें फाइलों को उन्हें रूप में छोड़कर चुनने देता है, इसलिए मेरा अनुमान है कि ऐसा करने का एक तरीका है।

समान प्रश्न है लेकिन इसका उचित उत्तर नहीं है:
फ़ाइल में ऑब्जेक्ट को HTML में फॉर्म में कैसे सेट करें?

यह भी अपलोड करने से पहले ड्रॉप-इमेज इनपुट फ़ाइल और पूर्वावलोकन को खींचने के समान नहीं है क्योंकि मैंने पहले से ही ड्रैग-डॉप और पूर्वावलोकन एक्शन हासिल किया है। मेरा प्रश्न किसी मूल कंटेनर में फाइल को छोड़ते समय खाली फ़ाइल इनपुट होने की समस्या के लिए विशिष्ट है


यहाँ MCVE के साथ एक बेला है जैसा कि आप देख सकते हैं कि मैं केवल बिना अतिरिक्त लाइब्रेरी के jQuery या शुद्ध जावास्क्रिप्ट का उपयोग करने में दिलचस्पी ले रहा हूं।

यद्यपि dropzone.js का उपयोग किया जा सकता है, यह मेरी आवश्यकताओं में फिट नहीं है और इसकी रूपरेखा को अनुकूलित करने के लिए पर्याप्त समय की आवश्यकता होगी। इसके अलावा, dropzone.js के पास कुछ कॉन्फ़िगरेशन आवश्यकताएं हैं जो मेरे asp.net अनुप्रयोग के भीतर नहीं मिल सकती हैं।

वेब के समाधान से एकत्रित समाधान "फ़ाइल इनपुट वैल्यू को प्रोग्रामैटिक रूप से कैसे सेट करें (यानी: ड्रैग-ड्रॉपिंग फाइलें)?"

अस्वीकरण: दिसंबर 2017 और आधुनिक ब्राउज़रों के लिए ही सही।


टीएल; डीआर: हाँ, अब आप कर सकते हैं!

* यदि आपके पास कोई डेटा ट्रांस्फर या फ़ॉइललिस्ट ऑब्जेक्ट है

इससे पहले , प्रोग्रामिंग में फाइलिंग को बदलते हुए input[type=file] फ़ील्ड विरासत सुरक्षा कमजोरियों के कारण अक्षम कर दी गई थी, जो आधुनिक ब्राउज़रों पर तय की गई है।

पिछले प्रमुख ब्राउज़र (फ़ायरफ़ॉक्स) ने हाल ही में इनपुट फ़ाइल क्षेत्र के लिए फाइलों को सेट करने के लिए सक्षम किया है। W3C परीक्षण के अनुसार, ऐसा लगता है कि आप पहले से ही Google Chrome पर ऐसा कर सकते हैं!

एमडीएन से उद्धृत प्रासंगिक स्क्रीनशॉट और पाठ:

यहां छवि विवरण दर्ज करें

आप सभी आधुनिक ब्राउज़रों में HTMLInputElement.files के मूल्य के साथ-साथ सेट भी कर सकते हैं।
स्रोत और ब्राउज़र संगतता, देखें एमडीएन

फ़ायरफ़ॉक्स बगफिक्स चर्चा थ्रेड में यह डेमो है, आप इसका परीक्षण कर सकते हैं , और यदि आप इसे संपादित करना चाहते हैं तो यहां इसका स्रोत है । भविष्य में संदर्भ के लिए, यदि यह लिंक मर जाता है, तो मैं इसे नीचे रननबल स्निपेट के रूप में भी शामिल करूँगा:

 let target = document.documentElement; let body = document.body; let fileInput = document.querySelector('input'); target.addEventListener('dragover', (e) => { e.preventDefault(); body.classList.add('dragging'); }); target.addEventListener('dragleave', () => { body.classList.remove('dragging'); }); target.addEventListener('drop', (e) => { e.preventDefault(); body.classList.remove('dragging'); fileInput.files = e.dataTransfer.files; }); 
 body { font-family: Roboto, sans-serif; } body.dragging::before { content: "Drop the file(s) anywhere on this page"; position: fixed; left: 0; width: 100%; top: 0; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 1.5em; background-color: rgba(255, 255, 0, .3); pointer-events: none; } button, input { font-family: inherit; } a { color: blue; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet"> <title>JS Bin</title> </head> <body> <h1>Drag and drop files into file input</h1> <p><small>Supported in <a href="https://github.com/whatwg/html/issues/2861">WebKit and Blink</a>. To test, drag and drop one or more files from your operating system onto this page.</small></p> <p> <input type="file"> </p> </body> </html>