जावास्क्रिप्ट में फ़ाइल संवाद बॉक्स खोलें


109

मुझे क्लिक करते समय HTML में खुली फ़ाइल संवाद प्रदर्शित करने के लिए एक समाधान की आवश्यकता है divdivक्लिक करते ही ओपन फाइल डायलॉग बॉक्स खुल जाना चाहिए ।

मैं HTML फ़ाइल के भाग के रूप में इनपुट फ़ाइल बॉक्स प्रदर्शित नहीं करना चाहता। इसे अलग संवाद में प्रदर्शित किया जाना चाहिए, जो वेब पेज का हिस्सा नहीं है।


4
अलर्ट फ़ाइल-संवाद नहीं है? - क्या आप स्पष्ट कर सकते हैं कि आप क्या पूछ रहे हैं?
लियाम

3
मुझे लगता है कि वह कह रहा है कि वह मानक "ओपन फाइल" पॉपअप चाहता है
वैलेंटाइन रोचर

1
जब एक div पर क्लिक किया जाता है तो मुझे ओपन डायलॉग बॉक्स की जरूरत होती है। यह उस चेतावनी की तरह होना चाहिए जो वेब पेज का हिस्सा नहीं है
ArK

जवाबों:


52

यहाँ एक अच्छा है

ठीक अपलोडर डेमो

यह अपने आप में एक <input type='file' />नियंत्रण है। लेकिन उस पर एक div रखा गया है और उस एहसास को पाने के लिए css स्टाइल को लागू किया जाता है। फ़ाइल नियंत्रण की अपारदर्शिता 0 पर सेट है ताकि यह प्रतीत हो कि डायव पर क्लिक करने पर संवाद विंडो खुल जाती है।


1
वहाँ जावास्क्रिप्ट द्वारा प्रदर्शित फ़ाइलों को नियंत्रित करने का एक तरीका है ... कहते हैं कि मैं फ़ाइल संवाद खोलना चाहता था और बस .pdf के साथ फ़ाइल एक्सटेंशन चाहता था ..
Ajax3.14

1
@ Ajax3.14 नए ब्राउज़रों में FileReader ऑब्जेक्ट है, पुराने ब्राउज़र जिन्हें आप मान लेते हैं और फ़ाइल एक्सटेंशन की तलाश करते हैं।
वक्री

2
@ Ajax3.14 FileReader या पार्स एक्सटेंशन का उपयोग करने की आवश्यकता नहीं है। कई ब्राउज़र फ़ाइल इनपुट पर स्वीकार विशेषता का समर्थन करते हैं। यह आपको फ़ाइल ब्राउज़र संवाद में प्रदर्शित फ़ाइल प्रकारों को सीमित करने की अनुमति देता है। ललित अपलोडर सत्यापन विकल्प की संपत्ति के माध्यम से इस कार्यक्षमता तक पहुँच प्रदान करता है। देखें विकल्पों दस्तावेज के सत्यापन अनुभाग अधिक जानकारी के लिए। ध्यान दें कि IE9 या इससे पहले स्वीकार विशेषता समर्थित नहीं है।
रे निकोलस

1
यह कैसे अच्छा है? यह एक अच्छा अभ्यास है? इस तरह से कुछ नहीं होना चाहिए: stackoverflow.com/a/18659941/915865 ?
कैट लिम रुइज

1
@KatLimRuiz नहीं, आपके द्वारा जोड़ा गया उत्तर एक अच्छा समाधान नहीं है। यदि आप संबंधित प्रपत्र को प्रोग्रामेटिक रूप से सबमिट करना समाप्त करते हैं, तो IE को एक त्रुटि फेंकने का कारण होगा।
रे निकोलस

77

    $("#logo").css('opacity','0');
    
    $("#select_logo").click(function(e){
       e.preventDefault();
       $("#logo").trigger('click');
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo">

IE के लिए यह जोड़ें:

$("#logo").css('filter','alpha(opacity = 0');

3
# झूठ_लोगो क्लिक हैंडलर में आप झूठे क्यों लौटते हैं?
सतीश

4
यह एक 404 त्रुटि उत्पन्न नहीं करेगा, यह अंत में # जोड़े जाने के साथ ही वर्तमान पृष्ठ पर जाने और नेविगेट करने का प्रयास करेगा। जिससे पेज टॉप पर आ जाता है। तो वहाँ रहना अच्छा है, बस एक अलग कारण के लिए :)
manavo

3
हालाँकि मैंने इसका पर्याप्त परीक्षण नहीं किया है, "दृश्यता: छिपी;" अधिक संगत लगता है। इसके अलावा, अस्पष्टता के बावजूद: 0 एक क्लिक इवेंट ट्रिगर करेगा यदि "अदृश्य" तत्व क्लिक किया गया, जबकि दृश्यता: छिपी नहीं होगी।
एरन

एमडीएन इंगित करता है कि document.getElementById("logo").click()पर्याप्त है। वे एक और तरीका "ड्रैग एंड ड्रॉप" भी दिखाते हैं। developer.mozilla.org/en-US/docs/Web/API/File/…
एरिक

2
आपको इसे सामान्य जावास्क्रिप्ट में बदलना चाहिए, इस तरह के एक छोटे से प्रोजेक्ट पर उपयोग करने के लिए JQuery के तार्किक तार्किक नहीं है _ _ ^
मिस्टर सिरकोड

57

मुझे नहीं पता कि किसी ने इसे इंगित क्यों नहीं किया है, लेकिन यहां किसी भी जावास्क्रिप्ट के बिना इसे करने का एक तरीका है और यह किसी भी ब्राउज़र के साथ संगत है।


संपादित करें: सफारी में, inputजब छिपा हुआ हो तो अक्षम हो जाता है display: none। उपयोग करने के लिए एक बेहतर तरीका होगा position: fixed; top: -100em


<label>
  Open file dialog
  <input type="file" style="position: fixed; top: -100em">
</label>

यदि आप चाहें, आप जा सकते हैं "सही तरीका" का उपयोग करके forमें labelकरने के लिए इशारा idइस तरह निवेश की:

<label for="inputId">file dialog</label>
<input id="inputId" type="file" style="position: fixed; top: -100em">

4
यह आकर्षण की तरह काम करता है, हालांकि, यहां कुछ सिफारिशें दी गई हैं: 1. <input>टैग में nameविशेषता होनी चाहिए ; 2. यदि forविशेषता निर्दिष्ट की जाती है, तो <input>फ़ाइल टैग की आवश्यकता होगी id
रैप्टर

5
Simplicity is the ultimate sophistication
ncubica

2
महान! यह एक पृष्ठभूमि छवि के साथ भी एक आकर्षण की तरह काम करता है या लेबल प्राप्त करने से एक क्लिक जावास्क्रिप्ट ट्रिगर हो जाता है। धन्यवाद!
लियो नोमेडेयू

2
बीटीडब्ल्यू, किसी ने इस समाधान के साथ एक पकड़ने का संकेत दिया, सफारी में, साथ छिपे इनपुट्स display: noneअक्षम हैं। इनपुट छिपाने के लिए वर्कअराउंड एक अलग दृष्टिकोण का उपयोग कर रहा है। मैं उस उत्तर को प्रतिबिंबित करने के लिए अपडेट करूंगा।
जेपी डे ला टोरे

1
@JPdelaTorre यदि आप अस्पष्टता का उपयोग करना चाहते हैं तो बेहतर होगा: इनपुट को छुपाने के बजाय 0।
एड्रियन

39

वास्तव में, आपको अस्पष्टता, दृश्यता, <input>स्टाइलिंग आदि के साथ उस सभी सामान की आवश्यकता नहीं है , बस एक नज़र डालें:

<a href="#">Just click me.</a>
<script type="text/javascript">
    $("a").click(function() {
        // creating input on-the-fly
        var input = $(document.createElement("input"));
        input.attr("type", "file");
        // add onchange handler if you wish to get the file :)
        input.trigger("click"); // opening dialog
        return false; // avoiding navigation
    });
</script>

JsFiddle पर डेमो । क्रोम 30.0 और फ़ायरफ़ॉक्स 24.0 में परीक्षण किया गया। हालाँकि ओपेरा 12.16 में काम नहीं किया था।


3
यह सही उत्तर होना चाहिए। शुद्ध जावास्क्रिप्ट कार्यान्वयन के लिए, किसी भी HTML कोड को संशोधित करने की आवश्यकता नहीं है।
झांग बज़

21
मूर्खतापूर्ण सवाल, लेकिन आपको बाद में चुनी हुई फ़ाइल कैसे मिलेगी?
जय विक

2
यह एक खतरनाक समाधान है जिसके परिणामस्वरूप अप्रत्याशित समस्याएं हो सकती हैं। उदाहरण के लिए, कुछ ब्राउज़र (जैसे IE) प्रोग्राम इनपुट को सबमिट करने से रोक सकते हैं यदि फ़ाइल इनपुट भी प्रोग्रामेटिक रूप से खोला गया है। इस समस्या को हल करने का सबसे अच्छा तरीका CSS है, जावास्क्रिप्ट नहीं।
रे निकोलस

3
@Charleston दुर्भाग्य से, यह कुछ ब्राउज़रों में काम नहीं करता है। हालांकि उन्हें यह काम करना चाहिए :)
तिगरान सालुवे

3
2020 तक, यह समाधान सबसे अच्छा लगता है। एज, सफारी, ओपेरा, फ़ायरफ़ॉक्स और क्रोम में BrowserStack पर इसका परीक्षण किया। उन सभी में काम करता है।
वी। रुबिनाटी

14

यह मेरे लिए सबसे अच्छा काम किया है (IE8, FF, क्रोम, सफारी पर परीक्षण)।

#file-input {
  cursor: pointer;
  outline: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  filter: alpha(opacity=0); /* IE < 9 */
  opacity: 0;
}
.input-label {
  cursor: pointer;
  position: relative;
  display: inline-block;
}
<label for="file-input" class="input-label">
  Click Me <!-- Replace with whatever text or icon you wish to use -->
  <input type="file" id="file-input">
</label>

स्पष्टीकरण: मैंने क्लिक किए जाने वाले तत्व के ऊपर फ़ाइल इनपुट को सीधे पोस्ट किया है, इसलिए कोई भी क्लिक या तो उस पर या उसके लेबल पर लैंड करेगा (जो अपलोड डायलॉग को ऐसे खींचता है जैसे आपने लेबल को क्लिक किया हो)। मेरे पास लेबल के किनारे से चिपके डिफ़ॉल्ट इनपुट के बटन भाग के साथ कुछ समस्याएं थीं, इसलिए overflow: hiddenइनपुट display: inline-blockपर और लेबल पर आवश्यक था।


1
इनपुट को अधिकतम करें और शून्य को अपारदर्शिता सेट करें। यह महान काम करता है!
किनोर्सी

13

क्या होगा अगर जावास्क्रिप्ट को क्लाइंट मशीन पर बंद कर दिया जाए? सभी परिदृश्यों के लिए निम्नलिखित समाधान का उपयोग करें। आपको जावास्क्रिप्ट / jQuery की भी आवश्यकता नहीं है। :

एचटीएमएल

<label for="fileInput"><img src="File_upload_Img"><label>
<input type="file" id="fileInput"></label>

सीएसएस

#fileInput{opacity:0}  
body{
    background:cadetblue;
}

स्पष्टीकरण: for="Your input Id"। ट्रिगर HTML द्वारा डिफ़ॉल्ट रूप से ईवेंट पर क्लिक करते हैं। तो यह डिफ़ॉल्ट ट्रिगर क्लिक इवेंट, jQuery / जावास्क्रिप्ट की कोई जरूरत नहीं है। अगर इसका बस HTML द्वारा किया जाता है तो jQuery / jScript का उपयोग क्यों करें? और यदि ग्राहक जेएस को अक्षम करते हैं तो आप नहीं बता सकते। जेएस के बंद होने पर भी आपकी सुविधा काम करनी चाहिए।

काम jsFiddle (आप जेएस, jquery की जरूरत नहीं है)


3
पृष्ठभूमि क्यों?
सोलोमन उको

12

पहले शीर्ष टैग में जोड़ें :

<script>
   function showDialog(openFileDialog) {
       document.getElementById(openFileDialog).click();
   }
   function fileName(openFileDialog) {
       return document.getElementById(openFileDialog).value;
   }
   function hasFile(openFileDialog) {
       return document.getElementById(openFileDialog).value != "";
   }
   function fileNameWithoutFakePath(openFileDialog) {
       var fileName = document.getElementById(openFileDialog).value;
       return fileName.substr(fileName.lastIndexOf('\\') + 1);
   }
   function fakePathWithoutFileName(openFileDialog) {
       var fileName = document.getElementById(openFileDialog).value;
       return fileName.substr(0, fileName.lastIndexOf('\\'));
   }
</script>

यदि आपके पास पहले से ही स्क्रिप्ट टैग हैं, तो बस इन कार्यों को ऊपर जोड़ें।

आपके शरीर या प्रपत्र टैग जोड़ने में:

<input type="file" style="display:none" id="yourDesiredOrFavoriteNameForTheNewOpenFileDialogInstance"/>

आपके html में कोई फर्क नहीं पड़ता, बस यह है कि आपने वैश्विक चर के रूप में OpenFileDialog वर्ग का एक नया उदाहरण बनाया है , जिसका नाम तत्व की आईडी है, भले ही आपके कोड या xaml में कोई फर्क नहीं पड़ता, लेकिन आपकी स्क्रिप्ट या कोड में , आप उसका नाम नहीं लिख सकते हैं , और फिर एक संपत्ति पढ़ सकते हैं या एक फ़ंक्शन को कॉल कर सकते हैं, क्योंकि वैश्विक कार्य हैं जो उन तत्वों को करते हैं जो तत्व इनपुट प्रकार = "फ़ाइल" में परिभाषित नहीं हैं। आपको बस इन फ़ंक्शंस को छिपे इनपुट प्रकार = "फ़ाइल" की आईडी देनी होगी, जो कि स्ट्रिंग के दौरान OpenFileDialog उदाहरण का नाम है।

अपने HTML में खुली फ़ाइल संवाद बनाने के लिए अपने जीवन को आसान बनाने के लिए, आप एक ऐसा कार्य कर सकते हैं जो यह करता है:

function createAndAddNewOpenFileDialog(name) {
     document.getElementById("yourBodyOrFormId").innerHtml += "<input type='file' style='display:none' id='" + name + "'/>"
}

और यदि आप खुले फ़ाइल संवाद को हटाना चाहते हैं, तो आप निम्न फ़ंक्शन बना और उपयोग कर सकते हैं:

function removeOpenFileDialog(name) {
    var html = document.getElementById("yourBodyOrFormId").innerHtml;
    html = html.replace("<input type='file' style='display:none' id='" + name + "'/>", "");
    document.getElementById("yourBodyOrFormId").innerHtml = html;
}

लेकिन इससे पहले कि आप खुले फ़ाइल संवाद को हटा दें, सुनिश्चित करें कि यह निम्नलिखित फ़ंक्शन को बनाकर और उपयोग करके मौजूद है:

function doesOpenFileDialogExist(name) {
    return document.getElementById("yourBodyOrFormId").innerHtml.indexOf("<input type='file' style='display:none' id='" + name + "'/>") != -1
}

और यदि आप बना सकते हैं और में खुले फ़ाइल संवाद जोड़ने के लिए नहीं करना चाहती शरीर या प्रपत्र html में टैग, इस वजह से छिपा इनपुट प्रकार = "फाइल" जोड़ रहा है है, तो आप इसके लिपि में ऊपर समारोह बनाने का उपयोग कर सकते :

function yourBodyOrFormId_onload() {
    createAndAddNewOpenFileDialog("openFileDialog1");
    createAndAddNewOpenFileDialog("openFileDialog2");
    createAndAddNewOpenFileDialog("openFileDialog3");
    createAndAddNewOpenFileDialog("File Upload");
    createAndAddNewOpenFileDialog("Image Upload");
    createAndAddNewOpenFileDialog("bla");
    //etc and rest of your code
}

सुनिश्चित करें कि आपके शरीर या प्रपत्र टैग के पास, आपने जोड़ा:

onload="yourBodyOrFormId_onload()"

यदि आपने पहले ही यह कर दिया है, तो आपको इस पंक्ति को करने की आवश्यकता नहीं है।

सुझाव: आप अपनी परियोजना या वेबसाइट नई JScript फ़ाइल में जोड़ सकते हैं, अगर आपके पास अभी तक नहीं है, और इस फ़ाइल में आप स्क्रिप्ट टैग और HTML या वेब फॉर्म पेज से सभी खुले फ़ाइल संवाद कार्यों को दूर रख सकते हैं , और उपयोग कर सकते हैं उन्हें इस JScript फ़ाइल से आपके html या वेब फॉर्म पेज में, लेकिन html या वेब फॉर्म पेज को JScript फाइल से लिंक करने से पहले मत भूलना। आप इसे केवल JScript फ़ाइल को अपने html पृष्ठ पर सिर में खींच कर कर सकते हैंटैग। यदि आपका पृष्ठ वेब फ़ॉर्म है और सरल HTML नहीं है, और आपके पास हेड टैग नहीं हैं, तो इसे कहीं भी रख दें ताकि यह काम कर सके। उस JScript फ़ाइल में वैश्विक चर को परिभाषित करने के लिए मत भूलना, जिसका मूल्य आपके शरीर या स्ट्रिंग के रूप में आईडी होगा। आपके द्वारा JScript फ़ाइल को अपने html या वेब फॉर्म पेज से लिंक करने के बाद, आप अपने बॉडी फॉर्म की घटना को लोड कर सकते हैं, उस वैरिएबल का मान अपने शरीर या फॉर्म आईडी में सेट कर सकते हैं। फिर JScript फ़ाइल में, आपको दस्तावेज़ को किसी एक पृष्ठ या किसी पृष्ठ के रूप में नहीं देना है, बस उसे उस चर का मान देना है। आप उस चर bodyId या formId या bodyOrFormId या किसी भी अन्य नाम से कॉल कर सकते हैं जिसे आप चाहते हैं।

भाग्य तुम्हारा साथ दे दोस्त!


1
यह सबसे अच्छा है कि सीधे भीतर HTML को संशोधित न करें।
सोलोमन उको

9

सबसे सरल तरीका:

#file-input {
  display: none;
}
<label for="file-input">
  <div>Click this div and select a file</div>
</label>
<input type="file" id="file-input"/>

क्या महत्वपूर्ण है, display: noneयह सुनिश्चित करता है कि छिपी हुई फ़ाइल इनपुट (क्या उपयोग होता है opacity: 0) द्वारा कोई जगह नहीं ली जाएगी ।


3

AFAIK आपको अभी भी एक <input type="file">तत्व की आवश्यकता है, तो आप इसे स्टाइल करने के लिए quirksmode से कुछ सामान का उपयोग कर सकते हैं


2

केवल <input type="file">एक ही div पर एक पारदर्शी फ़्लैश फिल्म एम्बेड करके है। फिर आप फ़्लैश के FileReference.browse को कॉल ट्रिगर करने के लिए एक उपयोगकर्ता द्वारा उत्पन्न क्लिक इवेंट (फ्लैश 10 नए सुरक्षा नियमों का अनुपालन) का उपयोग कर सकते हैं ।

यह quirksmode रास्ते पर एक अतिरिक्त निर्भरता प्रदान करता है लेकिन बदले में आपको बहुत अधिक घटनाएँ मिलती हैं (जैसे कि प्रगति की घटनाओं में निर्मित)।


-1

उपयोग कर सकते हैं

$('<input type="file" />').click()

मेरे मामले में, यह उसी पृष्ठ पर एक स्वचालित पुनर्निर्देशन का कारण बनता है जहां मूल क्लिक घटना हुई - पूरे पृष्ठ को फिर से लोड करना और पृष्ठ में पहले दर्ज किए गए सभी डेटा को खो देना।
मुंतसिर
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.