जावास्क्रिप्ट में मैं एक फ़ाइल इनपुट तत्व के लिए प्रोग्रामिक रूप से "क्लिक" इवेंट फायर कर सकता हूं?

Question

मैं एक <input type="file">टैग प्रोग्राम पर क्लिक इवेंट फायर को प्रोग्रामिक रूप से बनाना चाहूंगा ।

बस कॉलिंग क्लिक () कुछ भी करने के लिए नहीं लगता है या कम से कम यह एक फ़ाइल चयन संवाद को पॉप नहीं करता है।

मैं श्रोताओं का उपयोग करके घटनाओं को कैप्चर करने के साथ प्रयोग कर रहा हूं और इस घटना को पुनर्निर्देशित कर रहा हूं, लेकिन मैं वास्तव में इस तरह की घटना को अंजाम नहीं दे पा रहा हूं जैसे किसी ने उस पर क्लिक किया हो।

Comments

आपके द्वारा ट्रिगर की जाने वाली क्लिक इवेंट को उपयोगकर्ता द्वारा शुरू किए गए क्लिक इवेंट के भीतर बुलाया जाना चाहिए, या यह काम नहीं करेगा।

— उमगॉन

Answer 1

आप ऐसा नहीं कर सकते कि सभी ब्राउज़रों में, माना जाता है कि IE इसकी अनुमति देता है, लेकिन मोज़िला और ओपेरा ऐसा नहीं करते हैं।

जब आप GMail में कोई संदेश लिखते हैं, तो IE के लिए एक तरह से 'फाइल्स अटैच' फीचर लागू हो जाता है और जो भी ब्राउज़र इस बात का समर्थन करता है, और फिर फ़ायरफ़ॉक्स और उन ब्राउज़र के लिए एक और तरीका लागू होता है जो नहीं करते हैं।

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

Comments

Drat। वैसे मैं निश्चित रूप से समझता हूं कि यह शोषक है। क्या यह कहीं भी प्रलेखित है? मुझे लगता है कि यह प्रत्येक ब्राउज़र द्वारा कार्यान्वित किया जाएगा?

— 23:28 पर user28655

पिछले उत्तर की तुलना में अधिक सही होने के लिए मेरे उत्तर को अपडेट किया गया - जिस्ट एक ही है, लेकिन स्पष्टीकरण में थोड़ी मदद करनी चाहिए। यह आदमी एक ही समस्या में भाग गया: bytes.com/forum/thread542877.html

— जेसन बंटिंग

धन्यवाद भगवान FF5 इस क्लिक की अनुमति देता है

— rshimoda

उपरोक्त टिप्पणी को स्पष्ट करने के लिए: क्रोम हाल ही में यह जांचने के लिए बदल गया है कि फ़ाइल inputतत्व दिखाई दे रहा है या नहीं। clickयदि तत्व को देखा जा सकता है, तो कंसोल सहित विधि कार्य को ट्रिगर करना ।

— jwadsack

@Otvazhnii - यार, यह जवाब (आप जो कह रहे हैं वह गलत है) 10 साल पुराना है - कोई आश्चर्य नहीं कि यह सही नहीं है! (मुझे यकीन नहीं है, मैं इसके लिए आपका शब्द ले रहा हूं)। : P

— जेसन बंटिंग

Answer 2

मैं इस पूरे दिन का हल खोज रहा हूं। और ये मेरे द्वारा किए गए निष्कर्ष हैं:

1. सुरक्षा कारणों से ओपेरा और फ़ायरफ़ॉक्स फ़ाइल इनपुट को ट्रिगर करने की अनुमति नहीं देते हैं।
2. एकमात्र सुविधाजनक विकल्प एक "छिपा हुआ" फ़ाइल इनपुट बनाना है (अस्पष्टता का उपयोग करके, "छिपा हुआ" या "प्रदर्शन: कोई नहीं!"!) और इसके बाद "नीचे" बटन बनाएं। इस तरह से बटन दिखाई देता है लेकिन उपयोगकर्ता क्लिक करने पर यह वास्तव में फ़ाइल इनपुट को सक्रिय करता है।

उम्मीद है की यह मदद करेगा! :)

<div style="display: block; width: 100px; height: 20px; overflow: hidden;">
<button style="width: 110px; height: 30px; position: relative; top: -5px; left: -5px;"><a href="javascript: void(0)">Upload File</a></button>
<input type="file" id="upload_input" name="upload" style="font-size: 50px; width: 120px; opacity: 0; filter:alpha(opacity=0);  position: relative; top: -40px;; left: -20px" />
</div>

Comments

यह समाधान महान काम करता है। यकीन नहीं होता कि इसे क्यों नजरअंदाज किया गया और अप-डाउन किया गया। यह * बिल्कुल नहीं है कि सवाल क्या पूछता है, लेकिन यह एक महान काम है। क्या आपने इसे किसी भी ब्राउज़र के साथ असंगत पाया है? मेरे पास परीक्षण करने के लिए प्रासंगिक लोगों के सभी 10+ स्वादों के माध्यम से अपना काम करने का समय नहीं है।

— येवगेनी सिम्किन

इस उत्तर के लिए धन्यवाद, यह कमाल है: D

— mario.tco

अच्छा समाधान है। Android मोबाइल ब्राउज़र पर भी काम करता है।

— gstroup

यह सच नहीं है, नीचे दीदी की प्रतिक्रिया देखें। प्रोग्रामेटिक क्लिक को उपयोगकर्ता के एक्शन संदर्भ से आना होगा - जैसे किसी अन्य बटन के क्लिक हैंडलर में। तब यह ठीक काम करता है, कोई अतिप्रवाह तत्व की आवश्यकता नहीं है।

— धूम्रपान

इसके साथ एकमात्र समस्या यह है कि यदि आप होवर पर बटन शैली को बदलना चाहते हैं, तो आप नहीं कर सकते। जिसका अर्थ है कि यदि आप चाहते हैं कि यह आपके ऐप के अन्य सभी बटनों की तरह दिखे, तो आप नहीं कर सकते

— विंसेंट

Answer 3

आप किसी भी ब्राउज़र पर क्लिक () कर सकते हैं, लेकिन कुछ ब्राउज़रों को दिखाई और केंद्रित होने के लिए तत्व की आवश्यकता होती है। यहाँ एक jQuery उदाहरण है:

$('#input_element').show();
$('#input_element').focus();
$('#input_element').click();
$('#input_element').hide();

यह छिपाने से पहले काम करता है, click()लेकिन मुझे नहीं पता कि यह शो विधि को कॉल किए बिना काम करता है या नहीं। ओपेरा पर कभी यह कोशिश नहीं की, मैंने IE / FF / Safari / Chrome पर परीक्षण किया और यह काम करता है। मुझे उम्मीद है कि इससे सहायता मिलेगी।

Comments

साझा करने के लिए धन्यवाद। अगर आपको पता नहीं है तो आप jQuery में $(...).show().focus().click().hide();

— चैनिंग का

@pimvdb: जहां तक ​​मैं परीक्षण करता हूं, आपका समाधान केवल क्रोम पर काम करता है।

— लॉन्ग

@ होन्ज लॉन्ग: क्या आपका मतलब चैनिंग या फ्लोरिन मोगोस के समाधान से है? मुझे विश्वास नहीं है कि चेनिंग किसी भी क्रॉस-ब्राउज़र अंतर बना देगा।

— pimvdb

@ HoàngLong यह IE 8 और 9, नवीनतम क्रोम, सफारी और फ़ायरफ़ॉक्स में मेरे लिए काम करता है।

— सामी संहिता 19

अजीब। जैसा कि मैंने परीक्षण किया, यह उबंटू में क्रोम के तहत काम नहीं करता है।

— रेत

Answer 4

यह स्थिति है: FF4 +, ओपेरा के तहत; क्रोम: लेकिन:

1. inputElement.click()उपयोगकर्ता कार्रवाई के संदर्भ से बुलाया जाना चाहिए! (स्क्रिप्ट निष्पादन संदर्भ नहीं)

2. <input type="file" /> दिखाई देनी चाहिए (inputElement.style.display !== 'none' ) (आप इसे दृश्यता या किसी अन्य चीज़ से छिपा सकते हैं, लेकिन "प्रदर्शन" संपत्ति नहीं)

Comments

इससे मेरे लिए हल हो गया। मुझे onclickईवेंट को बाइंड करने के बजाय जावास्क्रिप्ट को विशेषता में जोड़ना था ।

— जसोनफुलंक

केवल उचित समाधान अपवोटिंग। अतिप्रवाह विधि बदसूरत है।

— स्मोक

हा! मुझे पता था कि इसे संदर्भ के साथ कुछ होना चाहिए! मैंने देखा था कि inputElement.click()कीडाउन इवेंट (किसी फ़ाइल को अटैच करने का शॉर्टकट) के भीतर से कॉल करना काम करता था, लेकिन इसे टाइमआउट या अजाक्स कॉलबैक में कॉल करना नहीं था। Upvoted।

— brettjonesdev

Btw किसी को भी "उपयोगकर्ता कार्रवाई संदर्भ" बनाम "स्क्रिप्ट निष्पादन संदर्भ" पर कोई और संसाधन है? सब कुछ मैं देख रहा हूँ जब खोज निष्पादन निष्पादन के साथ करना है और this। : /

— brettjonesdev

@bretjonesdev मुझे लगता है कि इसका अर्थ है कि उपयोगकर्ता द्वारा शुरू किए गए ईवेंट हैंडलर के अंदर निष्पादित करने की आवश्यकता है, जैसे एक क्लिक ईवेंट हैंडलर, बनाम एक वादा, टाइमआउट, या किसी अन्य गैर-उपयोगकर्ता द्वारा शुरू किए गए ईवेंट।

— एलेक्स गुएरा

Answer 5

उन लोगों के लिए जो समझते हैं कि आपको लिंक पर एक अदृश्य रूप देना है, लेकिन लिखने के लिए बहुत आलसी हैं, मैंने इसे आपके लिए लिखा है। ठीक है, मेरे लिए, लेकिन साथ ही साथ साझा कर सकते हैं। टिप्पणियों का स्वागत है।

HTML (कहीं):

<a id="fileLink" href="javascript:fileBrowse();" onmouseover="fileMove();">File Browse</a>

HTML (कहीं आपको परवाह नहीं):

<div id="uploadForm" style="filter:alpha(opacity=0); opacity: 0.0; width: 300px; cursor: pointer;">
    <form method="POST" enctype="multipart/form-data">
        <input type="file" name="file" />
    </form>
</div>

जावास्क्रिप्ट:

function pageY(el) {
    var ot = 0;
    while (el && el.offsetParent != el) {
        ot += el.offsetTop ? el.offsetTop : 0;
        el = el.offsetParent;
    }
    return ot;
}

function pageX(el) {
    var ol = 0;
    while (el && el.offsetParent != el) {
        ol += el.offsetLeft ? el.offsetLeft : 0;
        el = el.offsetParent;
    }
    return ol;
}

function fileMove() {
    if (navigator.appName == "Microsoft Internet Explorer") {
        return; // Don't need to do this in IE. 
    }
    var link = document.getElementById("fileLink");
    var form = document.getElementById("uploadForm");
    var x = pageX(link);
    var y = pageY(link);
    form.style.position = 'absolute';
    form.style.left = x + 'px';
    form.style.top = y + 'px';
}

function fileBrowse() {
    // This works in IE only. Doesn't do jack in FF. :( 
    var browseField = document.getElementById("uploadForm").file;
    browseField.click();
}

Answer 6

इस समाधान का प्रयास करें: http://code.google.com/p/upload-at-click/

Comments

कम से कम IE9 पर बहुत बदसूरत लग रहा है।

— किबेरियस

Answer 7

बस एक लेबल टैग का उपयोग करें, इस तरह से आप इनपुट को छिपा सकते हैं, और इसके संबंधित लेबल https://developer.mozilla.org/fr/docs/Web/HTML/Element/Label के माध्यम से काम कर सकते हैं

Comments

यह सही उत्तर है और इसे बढ़ावा दिया जाना चाहिए।

— विएरटेक

Answer 8

यदि आप clickक्रोम, फ़ायरफ़ॉक्स आदि पर काम करने की विधि चाहते हैं , तो निम्न शैली को अपनी इनपुट फ़ाइल पर लागू करें। यह पूरी तरह से छिपा होगा, यह ऐसा है जैसे आप करते हैं एdisplay: none;

#fileInput {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -5000px;
}

यह इतना आसान है, मैंने इसे काम किया है!

Comments

मुझे यह तरीका सबसे अच्छा लगा क्योंकि कुछ पुराने ब्राउज़र इनपुटईमेंट पर कुछ भी नहीं करेंगे। यदि यह छिपा हुआ है तो ()।

— निक

क्यों न सिर्फ सेट heightऔर widthकरने के लिए 0?

— सोलोमन उको

Answer 9

$(document).one('mousemove', function() { $(element).trigger('click') } );

मेरे लिए काम किया जब मैं इसी तरह की समस्या में भाग गया, यह एक नियमित eRube Goldberg है।

Answer 10

काम कर रहे समाधान

मुझे इस पुराने पोस्ट में जोड़ने दें, एक काम करने वाला समाधान जिसका उपयोग मैं करता था वह शायद नए और पुराने दोनों ब्राउज़रों के 80% या अधिक में काम करता है।

समाधान जटिल अभी तक सरल है। पहला कदम सीएसएस का उपयोग करना है और "अंडर-एलिमेंट्स" के साथ इनपुट फ़ाइल प्रकार को निर्देशित करना है, जो कि इसके माध्यम से दिखाता है। इसमें 0 की अपारदर्शिता है। अगला चरण जावास्क्रिप्ट का उपयोग करके अपने लेबल को आवश्यकतानुसार अपडेट करना है।

_{यदि आप किसी विशिष्ट तत्व तक पहुँचने के लिए एक त्वरित तरीका चाहते हैं, तो} HTML _{आईडी आसानी से डाली जाती है, हालांकि, यह आवश्यक है कि वे सीएसएस से संबंधित हैं जो इस पूरी प्रक्रिया को सेट करता है।}

<div class="file-input wrapper">
    <input id="inpFile0" type="file" class="file-input control" />
    <div class="file-input content">
        <label id="inpFileOutput0" for="inpFileButton" class="file-input output">Click Here</label>
        <input id="inpFileButton0" type="button" class="file-input button" value="Select File" />
    </div>
</div>

CSS _{का ध्यान रखें, रंग और फ़ॉन्ट-शैली और इस तरह पूरी तरह से आपकी प्राथमिकता है, यदि आप इस बुनियादी CSS का उपयोग करते हैं, तो आप हमेशा शैली के बाद के अंत तक मार्क का उपयोग कर सकते हैं जैसा कि आप कृपया, यह अंत में सूचीबद्ध jsFiddle में दिखाया गया है।}

.file-test-area {
    border: 1px solid;
    margin: .5em;
    padding: 1em;
}
.file-input {
    cursor: pointer !important;
}
.file-input * {
    cursor: pointer !important;
    display: inline-block;
}
.file-input.wrapper {
    display: inline-block;
    font-size: 14px;
    height: auto;
    overflow: hidden;
    position: relative;
    width: auto;
}
.file-input.control {
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;

    height: 100%;
    position: absolute;
    text-align: right;
    width: 100%;
    z-index: 2;
}
.file-input.content {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 1;
}
.file-input.output {
    background-color: #FFC;
    font-size: .8em;
    padding: .2em .2em .2em .4em;
    text-align: center;
    width: 10em;
}
.file-input.button {
    border: none;
    font-weight: bold;
    margin-left: .25em;
    padding: 0 .25em;
}

जावास्क्रिप्ट _{शुद्ध और सच है, हालांकि, कुछ पुराने (सेवानिवृत्त) ब्राउज़रों को अभी भी इससे परेशानी हो सकती है (जैसे नेटस्केप 2)!}

var inp = document.getElementsByTagName('input');
for (var i=0;i<inp.length;i++) {
    if (inp[i].type != 'file') continue;
    inp[i].relatedElement = inp[i].parentNode.getElementsByTagName('label')[0];
    inp[i].onchange /*= inp[i].onmouseout*/ = function () {
        this.relatedElement.innerHTML = this.value;
    };
};

काम jsFiddle उदाहरण

Answer 11

यह काम करता हैं :

फ़ायरफ़ॉक्स और ओपेरा पर सुरक्षा कारणों से, आप फ़ाइल इनपुट पर क्लिक को फायर नहीं कर सकते, लेकिन आप माउसइवेंट के साथ अनुकरण कर सकते हैं:

<script>
click=function(element){
    if(element!=null){
        try {element.click();}
        catch(e) {
            var evt = document.createEvent("MouseEvents");
            evt.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null);
            element.dispatchEvent(evt);
            }
        }
    };
</script>

<input type="button" value="upload" onclick="click(document.getElementById('inputFile'));"><input type="file" id="inputFile" style="display:none">

Comments

ध्यान दें कि createEvent()और initMouseEvent()अब पदावनत कर रहे हैं।

— एलेक्सिस विलके 1

Answer 12

मुझे पता है कि यह पुराना है, और ये सभी समाधान वास्तविक मूल्य के साथ ब्राउज़र सुरक्षा सावधानियों के आसपास हैक्स हैं।

कहा कि, आज के रूप में, fileInput.click () वर्तमान क्रोम (36.0.1985.125 मीटर) और वर्तमान फ़ायरफ़ॉक्स ईएसआर (24.7.0) में काम करता है, लेकिन वर्तमान IE (11.0.9600.17207) में नहीं। बटन के शीर्ष पर अपारदर्शिता 0 के साथ एक फ़ाइल फ़ील्ड को ओवरलेइंग करना, लेकिन मैं दृश्य ट्रिगर के रूप में एक लिंक तत्व चाहता था, और होवर को रेखांकित करना किसी भी ब्राउज़र में काफी काम नहीं करता है। यह तब गायब हो जाता है, शायद ब्राउज़र सोचता है कि क्या होवर स्टाइल वास्तव में लागू होता है या नहीं।

लेकिन मुझे एक समाधान मिला जो उन सभी ब्राउज़रों में काम करता है। मैं हर ब्राउज़र के हर संस्करण का परीक्षण करने का दावा नहीं करूंगा, या मुझे पता है कि यह हमेशा के लिए काम करना जारी रखेगा, लेकिन यह मेरी जरूरतों को पूरा करता है।

यह सरल है: फ़ाइल इनपुट फ़ील्ड ऑफ़स्क्रीन स्थिति (स्थिति: निरपेक्ष; शीर्ष: -5000px), इसके चारों ओर एक लेबल तत्व डालें, और फ़ाइल फ़ील्ड के बजाय लेबल पर क्लिक ट्रिगर करें।

ध्यान दें कि लेबल की क्लिक विधि को कॉल करने के लिए लिंक को स्क्रिप्ट करने की आवश्यकता होती है, यह स्वचालित रूप से नहीं करता है, जैसे कि जब आप लेबल तत्व के अंदर पाठ पर क्लिक करते हैं। जाहिरा तौर पर लिंक तत्व क्लिक को कैप्चर करता है, और यह लेबल के माध्यम से नहीं बनाता है।

यह भी ध्यान दें कि यह वर्तमान में चयनित फ़ाइल को दिखाने का एक तरीका प्रदान नहीं करता है, क्योंकि फ़ील्ड ऑफ़स्क्रीन है। जब एक फ़ाइल का चयन किया गया था, तो मैं तुरंत सबमिट करना चाहता था, इसलिए यह मेरे लिए कोई समस्या नहीं है, लेकिन अगर आपकी स्थिति अलग है, तो आपको कुछ अलग दृष्टिकोण की आवश्यकता होगी।

Comments

ठीक है, बटन टैग पर, onclick = "filetag.click ()" IE 9 और 10 के साथ काम नहीं करता है (लेकिन IE 11, फ़ायरफ़ॉक्स 4/10/26/27/28, क्रोम / क्रोमियम 31/32/33 / के साथ काम करता है) 36, सफारी 7, ओपेरा 23)। लेकिन, यदि आप = "id-of-file-input" (onlick के बिना) के लिए एक लेबल का उपयोग करते हैं, तो यह IE 9/10/11 के लिए काम करता है।

— लुइगीफैब

Answer 13

जेएस फिडेल: http://jsfiddle.net/eyedean/1bw357kw/

popFileSelector = function() {
    var el = document.getElementById("fileElem");
    if (el) {
        el.click();  
    }
};

window.popRightAway = function() {
    document.getElementById('log').innerHTML += 'I am right away!<br />';
    popFileSelector();
};

window.popWithDelay = function() {
    document.getElementById('log').innerHTML += 'I am gonna delay!<br />';
    window.setTimeout(function() {
        document.getElementById('log').innerHTML += 'I was delayed!<br />';
        popFileSelector();
    }, 1000);
};

<body>
  <form>
      <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)" />
  </form>
  <a onclick="popRightAway()" href="#">Pop Now</a>
    <br />
  <a onclick="popWithDelay()" href="#">Pop With 1 Second Delay</a>
    <div id="log">Log: <br /></div>
</body>

Answer 14

यह कोड मेरे लिए काम करता है। क्या यह आप करने की कोशिश कर रहे हैं?

<input type="file" style="position:absolute;left:-999px;" id="fileinput" />
<button  id="addfiles" >Add files</button>

<script language="javascript" type="text/javascript">
   $("#addfiles").click(function(){
      $("#fileinput").click();
   });
</script>

Answer 15

JQuery और jQuery-ui के साथ सफारी के लिए मेरा समाधान:

$("<input type='file' class='ui-helper-hidden-accessible' />").appendTo("body").focus().trigger('click');

Comments

हेड अप: फ़ायरफ़ॉक्स 33, क्रोम 38 के लिए काम नहीं करता है। ट्रिगर ('क्लिक') केवल उपयोगकर्ता इंटरैक्शन इवेंट संदर्भ में काम कर सकता है - हैंडलर।

— अमित जी

Answer 16

यहाँ इस समस्या का शुद्ध जावास्क्रिप्ट समाधान है। सभी ब्राउज़रों में अच्छी तरह से काम करता है

<script>
    function upload_image_init(){
        var elem = document.getElementById('file');
        if(elem && document.createEvent) {
           var evt = document.createEvent("MouseEvents");
           evt.initEvent("click", true, false);
           elem.dispatchEvent(evt);
        }
    }
</script>

Answer 17

घटनाओं को नियंत्रण में पुनर्निर्देशित करने के तरीके हैं लेकिन आसानी से आग की घटनाओं को आग पर काबू पाने में सक्षम होने की उम्मीद न करें क्योंकि ब्राउज़र उस (अच्छे) सुरक्षा कारणों को अवरुद्ध करने का प्रयास करेंगे।

यदि उपयोगकर्ता को किसी चीज़ पर क्लिक करने के लिए आपको केवल फ़ाइल डायलॉग की आवश्यकता होती है, तो मान लीजिए कि आप बेहतर अपलोड फ़ाइल बटन देखना चाहते हैं, तो आप शायद इस बात पर एक नज़र रखना चाहते हैं कि शॉन इनमैन किसके साथ आया था ।

मैं की-डाउन, कीबोर्ड और की-अप इवेंट्स के बीच नियंत्रण से बाहर और बाहर रचनात्मक शिफ्टिंग के साथ कीबोर्ड ट्रिगरिंग को प्राप्त करने में सक्षम रहा हूं। YMMV।

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

Answer 18

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

1. एक फ़ाइल अपलोड और एक अलग तत्व बनाएं जिसमें एक छवि हो जिसे आप बटन के रूप में उपयोग करना चाहते हैं
2. उन्हें ओवरलैप करने और फ़ाइल तत्व बैकग्राउड और बॉर्डर को पारदर्शी बनाने की व्यवस्था करें ताकि बटन केवल दिखाई देने वाली चीज़ हो
3. जब बटन / फ़ाइल इनपुट पर क्लिक किया जाता है तो IE को डायलॉग खोलने के लिए जावास्क्रिप्ट जोड़ें
4. जब फ़ाइल का चयन किया जाता है, तो फॉर्म सबमिट करने के लिए एक ऑन्चेंज ईवेंट का उपयोग करें

यह केवल सैद्धांतिक है क्योंकि मैंने पहले से ही समस्या को हल करने के लिए एक और तरीका इस्तेमाल किया है लेकिन यह सिर्फ काम कर सकता है।

Answer 19

मेरे पास एक <input type="button">टैग छिपा हुआ था । मैंने जो किया वह संलग्न था"onClick" किसी भी प्रकार के किसी भी दृश्य घटक जैसे कि एक लेबल के रूप घटना को । यह Google Chrome के डेवलपर टूल या मोज़िला फ़ायरफ़ॉक्स के फ़ायरबग का उपयोग करके राइट-क्लिक "HTML संपादित करें" कमांड का उपयोग करके किया गया था। इस घटना में निम्नलिखित स्क्रिप्ट या कुछ इसी तरह निर्दिष्ट करें:

यदि आपके पास JQuery है:

$('#id_of_component').click();

अगर नहीं:

document.getElementById('id_of_component').click();

धन्यवाद।

Answer 20

अरे यह समाधान काम करता है। डाउनलोड के लिए हमें MSBLOB का उपयोग करना चाहिए

$scope.getSingleInvoicePDF = function(invoiceNumberEntity) {
   var fileName = invoiceNumberEntity + ".pdf";
   var pdfDownload = document.createElement("a");
   document.body.appendChild(pdfDownload);

   AngularWebService.getFileWithSuffix("ezbillpdfget",invoiceNumberEntity,"pdf" ).then(function(returnedJSON) {
       var fileBlob = new Blob([returnedJSON.data], {type: 'application/pdf'});
       if (navigator.appVersion.toString().indexOf('.NET') > 0) { // for IE browser
           window.navigator.msSaveBlob(fileBlob, fileName);
       } else { // for other browsers
           var fileURL = window.URL.createObjectURL(fileBlob);
           pdfDownload.href = fileURL;
           pdfDownload.download = fileName;
           pdfDownload.click();      
       }
   });
};

AngularJS के लिए या सामान्य जावास्क्रिप्ट के लिए भी।

Answer 21

यह अब फ़ायरफ़ॉक्स 4 में संभव होगा, कैविटी के साथ कि यह एक पॉप-अप विंडो के रूप में गिना जाता है और इसलिए जब भी पॉप-अप विंडो होती तो इसे ब्लॉक कर दिया जाता।

Comments

वास्तव में फ़ायरफ़ॉक्स 4 फ़ाइल अपलोड की स्थिति में बहुत सुधार करता है। मेरी परेशानी यह है कि Google Chrome ब्राउज़र में समान कैसे करें।

— erick2red

Answer 22

यहाँ समाधान है कि मेरे लिए काम कर रहा है: सीएसएस:

#uploadtruefield {
    left: 225px;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 266px;
    opacity:0;
    -moz-opacity:0;
    filter:alpha(opacity:0);
    width: 270px;
    z-index: 2;
}

.uploadmask {
    background:url(../img/browse.gif) no-repeat 100% 50%;
}
#uploadmaskfield{
    width:132px;
}

"छोटा" JQuery की मदद से HTML:

<div class="uploadmask">
    <input id="uploadmaskfield" type="text" name="uploadmaskfield">
</div>
<input id="uploadtruefield"  type="file" onchange="$('#uploadmaskfield').val(this.value)" >

बस सुनिश्चित करें कि नकाबपोश सच अपलोड फ़ील्ड द्वारा पूरी तरह से कवर किया गया है।

Answer 23

आप इसे < File टैग पर ओपन फाइल डायलॉग बॉक्स के उत्तर के अनुसार कर सकते हैं

<input type="file" id="upload" name="upload" style="visibility: hidden; width: 1px;     height: 1px" multiple />
<a href="" onclick="document.getElementById('upload').click(); return false">Upload</a>

Answer 24

मैंने पाया कि यदि इनपुट (फ़ाइल) बाहरी रूप है, तो क्लिक ईवेंट फ़ाइल फायरिंग को डायलॉग डायल करता है।

Answer 25

उम्मीद है कि यह किसी की मदद करता है - मैंने इसके खिलाफ अपना सिर पीटने में 2 घंटे बिताए:

IE8 या IE9 में, यदि आप किसी भी तरह से जावास्क्रिप्ट के साथ एक फ़ाइल इनपुट खोलने को ट्रिगर करते हैं (मुझे विश्वास है कि मैंने उन सभी की कोशिश की है), यह आपको जावास्क्रिप्ट का उपयोग करके फ़ॉर्म जमा नहीं करने देगा, यह बस चुपचाप विफल हो जाएगा।

एक नियमित सबमिट बटन के माध्यम से फ़ॉर्म जमा करना काम कर सकता है, लेकिन फॉर्म सबमिट करना। submit (); चुपचाप विफल हो जाएगा।

मुझे अपने चुनिंदा फ़ाइल बटन को एक पारदर्शी फ़ाइल इनपुट के साथ ओवरले करने का सहारा लेना पड़ा जो काम करता है।

Comments

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

— गलातियों

Answer 26

यह मेरे लिए काम किया:

<script>
    function sel_file() {
        $("input[name=userfile]").trigger('click');
    }  
</script>

<input type="file" name="userfile" id="userfile" />

<a href="javascript:sel_file();">Click</a>

Answer 27

यह असंभव नहीं है:

var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);  
setTimeout(function(){ document.getElementById('input_field_id').dispatchEvent(evObj); },100);

लेकिन किसी तरह यह केवल तभी काम करता है जब यह एक फ़ंक्शन में होता है जिसे एक क्लिक-ईवेंट के माध्यम से बुलाया गया था।

तो आप निम्नलिखित सेटअप हो सकता है:

एचटीएमएल:

<div onclick="openFileChooser()" class="some_fancy_stuff">Click here to open image chooser</div>
<input type="file" id="input_img">

जावास्क्रिप्ट:

    function openFileChooser() {
      var evObj = document.createEvent('MouseEvents');
      evObj.initMouseEvent('click', true, true, window);  
      setTimeout(function()
      { 
        document.getElementById('input_img').dispatchEvent(evObj);      
      },100);      
    }

Comments

createEvent()और initMouseEvent()पदावनत किया गया। आपको CustomEvent()अब उपयोग करना होगा ...

— एलेक्सिस विल्के

Answer 28

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

<button id="file">select file</button>
<input type="file" name="file" id="file_input" style="display:none;">
<script>
$('#file').click(function() {
        $('#file_input').focus().trigger('click');
    });
</script>