HTML में फ़ाइल इनपुट के लिए मान कैसे सेट करें?


337

मैं इसका मूल्य कैसे निर्धारित कर सकता हूं?

<input type="file" />

3
मैंने इस बारे में एक पूर्ण संदर्भित और अद्यतित (2013 से) उत्तर दिया: याद रखें और फ़ाइल इनपुट को फिर से
बनाएँ

जवाबों:


525

सुरक्षा कारणों से आप नहीं कर सकते।

कल्पना कीजिए:

<form name="foo" method="post" enctype="multipart/form-data">
    <input type="file" value="c:/passwords.txt">
</form>
<script>document.foo.submit();</script>

आप नहीं चाहते कि आपके द्वारा देखी जाने वाली वेबसाइटें ऐसा करने में सक्षम हों, क्या आप? =)


क्या आप इसे साफ़ कर सकते हैं? यह मुझे बताता है कि फ़ाइल नाम को हर बार याद करने के बाद याद किया जाता है। Pelase देख stackoverflow.com/questions/41807471/...
Mawg कहते ही पुन: स्थापित मोनिका

1
मैं सुरक्षा के मुद्दे को समझता हूं, लेकिन क्या ब्राउज़र को खतरनाक स्थानीय फ़ाइलपथ और डेटाअवर जैसे कुछ और अधिक सहज ज्ञान के बीच अंतर करने में सक्षम नहीं होना चाहिए? शायद यह एक पाइप-सपना है।
काऊलीनटर २17 ’

5
ड्रैग एन ड्रॉप फ़ंक्शन के बारे में क्या है, उस फ़ाइल को इनपुट फ़ील्ड पर सेट करने का कोई तरीका नहीं है?
वेदांत

1
@Vedmant हाँ आप अन्य तत्वों पर ड्रैग / ड्रॉप ईवेंट के साथ फाइल एलिमेंट का मान सेट कर सकते हैं। प्रोग्राम से फ़ाइल इनपुट मान कैसे सेट करें
शमूएल एलवाई

129

आप नहीं कर सकते।

फ़ाइल इनपुट का मान सेट करने का एकमात्र तरीका उपयोगकर्ता द्वारा फ़ाइल का चयन करना है।

ऐसा सुरक्षा कारणों से किया जाता है। अन्यथा आप एक जावास्क्रिप्ट बनाने में सक्षम होंगे जो ग्राहक के कंप्यूटर से एक विशिष्ट फ़ाइल को स्वचालित रूप से अपलोड करता है।


51

आपके प्रश्न का उत्तर नहीं (जो अन्य लोगों ने उत्तर दिया है), लेकिन यदि आप किसी अपलोड की गई फ़ाइल फ़ील्ड की कुछ संपादित कार्यक्षमता चाहते हैं, तो आप क्या करना चाहते हैं:

  • केवल फ़ाइल नाम या URL को प्रिंट करके, इसे डाउनलोड करने के लिए एक क्लिक करने योग्य लिंक, या यदि यह एक छवि है, तो इस क्षेत्र का वर्तमान मूल्य दिखाएं: संभवतः इसे थंबनेल के रूप में दिखाएं
  • <input>टैग एक नई फ़ाइल अपलोड करने के लिए
  • एक चेकबॉक्स, जो जब चेक किया जाता है, तो वर्तमान में अपलोड की गई फ़ाइल को हटा देता है। ध्यान दें कि 'खाली' फ़ाइल अपलोड करने का कोई तरीका नहीं है, इसलिए आपको फ़ील्ड के मूल्य को निकालने के लिए कुछ इस तरह की आवश्यकता है

1
मुझे लगता है कि मुझे यही चाहिए। यदि मैं उत्पाद जानकारी संपादित करना चाहता<input type="file" /> हूं (उत्पाद छवि को बदलना नहीं चाहता), तो मुझे मौजूदा उत्पाद छवि कैसे सेट करनी चाहिए ? मैं एक <img />टैग में मौजूदा छवि दिखा सकता हूं लेकिन जब मैं सबमिट करता हूं तो फ़ाइल पास नहीं होती है।
पार्थो 63

37

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


10

जैसा कि यहाँ बाकी सभी ने कहा है: आप जावास्क्रिप्ट के साथ कोई फ़ाइल स्वचालित रूप से अपलोड नहीं कर सकते।

तथापि! यदि आपके पास अपने कोड में भेजने के लिए आवश्यक जानकारी है (यानी, पासवर्ड नहीं। Txt), तो आप इसे एक बूँद के रूप में अपलोड कर सकते हैं टाइप के , और फिर इसे एक फ़ाइल के रूप में मान सकते हैं।

सर्वर क्या देख कर समाप्त होगा वास्तव में किसी के मूल्य को निर्धारित करने से अप्रभेद्य होगा <input type="file" />। चाल, अंततः, सर्वर के साथ एक नया XMLHttpRequest () शुरू करना है ...

function uploadFile (data) {
        // define data and connections
    var blob = new Blob([JSON.stringify(data)]);
    var url = URL.createObjectURL(blob);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'myForm.php', true);

        // define new form
    var formData = new FormData();
    formData.append('someUploadIdentifier', blob, 'someFileName.json');

        // action after uploading happens
    xhr.onload = function(e) {
        console.log("File uploading completed!");
    };

        // do the uploading
    console.log("File uploading started!");
    xhr.send(formData);
}

    // This data/text below is local to the JS script, so we are allowed to send it!
uploadFile({'hello!':'how are you?'});

तो, आप संभवतः इसके लिए क्या उपयोग कर सकते हैं? मैं HTML5 कैनवास तत्वों को jpg के रूप में अपलोड करने के लिए इसका उपयोग करता हूं । यह उपयोगकर्ता को एक file inputतत्व को खोलने की परेशानी से बचाता है , केवल स्थानीय, कैश्ड छवि का चयन करने के लिए जो कि वे केवल आकार परिवर्तन, संशोधित, आदि .. लेकिन यह किसी भी फ़ाइल प्रकार के लिए काम करना चाहिए ।


1

1) फ़ाइल इनपुट में डिफ़ॉल्ट मान की समस्या "सुरक्षा कारणों से नहीं" है, लेकिन ब्राउज़र "बिना किसी अच्छे कारण के इसे लागू करने में विफल रहे": इसे देखें गहरी रिपोर्ट देखें

2) एक सरल समाधान फ़ाइल इनपुट के शीर्ष पर पाठ इनपुट का उपयोग करने के लिए हो सकता है, जैसे यहां । बेशक, आपको फ़ाइल भेजने के लिए कुछ कोड की आवश्यकता है, अब पाठ इनपुट में मूल्य और फ़ाइल इनपुट नहीं।

मेरे मामले में, एचटीए एप्लिकेशन करना, यह कोई समस्या नहीं है, मैं फॉर्म का उपयोग बिल्कुल नहीं करता हूं।


-4

HTML में परिभाषित करें:

<input type="hidden" name="image" id="image"/>

जेएस में:

ajax.jsonRpc("/consulta/dni", 'call', {'document_number': document_number})
    .then(function (data) {
        if (data.error){
            ...;
        }
        else {
            $('#image').val(data.image);
        }
    })

उपरांत:

<input type="hidden" name="image" id="image" value="/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8U..."/>
<button type="submit">Submit</button>

-8

वास्तव में हम यह कर सकते हैं। हम WebTrowser नियंत्रण का उपयोग करके c # में FormToMultipartPostData लाइब्रेरी का उपयोग करके फ़ाइल मान को डिफ़ॉल्ट रूप से सेट कर सकते हैं। हमें इस लाइब्रेरी को अपनी परियोजना में डाउनलोड और शामिल करना होगा। Webbrowser उपयोगकर्ता को वेब पेजों को फ़ॉर्म के अंदर नेविगेट करने में सक्षम बनाता है। एक बार वेब पेज लोड हो जाने पर, WebBrowser1_DocumentCompleted के अंदर की स्क्रिप्ट निष्पादित हो जाएगी। इसलिए,

private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
    {
       FormToMultipartPostData postData = 
            new FormToMultipartPostData(webBrowser1, form);
        postData.SetFile("fileField", @"C:\windows\win.ini");
        postData.Submit();
    }

डाउनलोड करने और संपूर्ण संदर्भ के लिए नीचे दिए गए लिंक को देखें।

https://www.codeproject.com/Articles/28917/Setting-a-file-to-upload-inside-the-WebBrowser-com


2
यह किस भाषा के लिए है? यह जावास्क्रिप्ट नहीं है।
जॉन
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.