jQuery ट्रिगर फ़ाइल इनपुट

Question

JQuery का उपयोग करके अपलोड बॉक्स (ब्राउज बटन) को ट्रिगर करने की कोशिश कर रहा हूं।
मैंने अभी जो तरीका आजमाया है वह है:

$('#fileinput').trigger('click');   

लेकिन यह काम नहीं करता है। कृपया मदद कीजिए। धन्यवाद।

Comments

आप इसके बजाय कुछ इस तरह की कोशिश कर सकते हैं ।

— कीर्तन

ऐसा करने का कोई तरीका नहीं है? कितना निराशाजनक है।

— मार्कस डाउनिंग

वास्तव में गहराई से, और यह 'क्लिक' से शुरू होता है, गंभीरता से? मैं अपने तंग एपीआई और मजबूत सुरक्षा मॉडल के साथ फ्लैश / एएस 3 को पसंद करता हूं, जो कि केवल फाइलरिजन.ब्रोसे को उपयोगकर्ता द्वारा शुरू किए गए इनपुट इवेंट हैंडलर से कॉल करने की अनुमति देता है। इसके अलावा, HTML फ़ाइल इनपुट बदसूरत है और शैलीगत नहीं है (यह सिर्फ एक इनपुट टैग है, सामग्री और शैली को अलग करने के लिए बहुत कुछ), इसलिए आपको एक नया 'ब्राउज' बटन बनाना होगा, जो एक क्लिक ईवेंट द्वारा भी सक्रिय हो ... जिसे आपको एक क्लिक के रूप में फ़ाइल इनपुट के लिए अग्रेषित करना होगा ... जिससे तत्व प्लेसमेंट और इवेंट डेलिगेशन विशिष्टता के आधार पर अनंत पुनरावृत्ति हो सकती है।

— त्रिनको

दुर्भाग्य से, फ्लैश का उपयोग कम और कम व्यवहार्य होता जा रहा है, इसके निरंतर सुरक्षा मुद्दों और सामग्री अवरोधकों का उदय।

— टिम

Answer 1

यह सुरक्षा प्रतिबंध के कारण है।

मुझे पता चला कि सुरक्षा प्रतिबंध केवल तभी <input type="file"/>निर्धारित किया जाता है जब display:none;या के लिए निर्धारित किया जाता है visbilty:hidden।

तो मैं इसे स्थिति की कोशिश की व्यूपोर्ट के बाहर की स्थापना करके position:absoluteऔर top:-100px;यह काम करता है और देखा।

http://jsfiddle.net/DSARd/1/ देखें

इसे हैक कहते हैं।

उम्मीद है वह आप के काम आएगा।

Comments

3.6 में काम नहीं करता है। क्रोम में और यहां तक ​​कि 8 में काम करता है, हालांकि :)

— AyKarsi

क्या सुरक्षा प्रतिबंध के बारे में msdn पर कोई दस्तावेज है?

— ईकॉमर्स

बहुत अच्छा काम करता है। किसी भी मामले में मुझे लगता है कि सुरक्षित है a left: -100px;। आप कभी नहीं जान सकते कि पेज कितने समय का हो सकता है

— ऑल्टर लागोस

+1 यह वास्तविक उत्तर है (और एक अच्छा समाधान)। क्या किसी के पास दस्तावेज़ीकरण की एक कड़ी होगी जहां यह स्पष्ट रूप से कहा गया है?

— कोंतुर

तुम भी सिर्फ अपारदर्शिता सेट कर सकते हैं 0

— स्टुअर्ट

Answer 2

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

जे एस:

$('#fileinput').trigger('click'); 

HTML:

<div class="hiddenfile">
  <input name="upload" type="file" id="fileinput"/>
</div>

सीएसएस:

.hiddenfile {
 width: 0px;
 height: 0px;
 overflow: hidden;
}

---

>>> क्रॉस-ब्राउज़र काम करने वाला एक और: <<<

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

जेएस फिडल: http://jsfiddle.net/5Rh7b/

HTML:

<div id="mybutton">
  <input type="file" id="myfile" name="upload"/>
  Click Me!
</div>

सीएसएस:

div#mybutton {

  /* IMPORTANT STUFF */
  overflow: hidden;
  position: relative;   

  /* SOME STYLING */
  width:  50px;
  height: 28px;
  border: 1px solid green;
  font-weight: bold
  background: red;
}

div#mybutton:hover {
  background: green;
}

input#myfile {
  height: 30px;
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 100px;
  z-index: 2;

  opacity: 0.0; /* Standard: FF gt 1.5, Opera, Safari */
  filter: alpha(opacity=0); /* IE lt 8 */
  -ms-filter: "alpha(opacity=0)"; /* IE 8 */
  -khtml-opacity: 0.0; /* Safari 1.x */
  -moz-opacity: 0.0; /* FF lt 1.5, Netscape */
}

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

$(document).ready(function() {
    $('#myfile').change(function(evt) {
        alert($(this).val());
    });
});

Comments

एक दोष है, यदि आप बटन को व्यापक बनाते हैं, तो IE9 / 10 में अदृश्य अपलोड बटन दाएं बटन और एक बाएं टेक्स्ट-फ़ील्ड से बना है। इस पर आपको डबल क्लिक करना है। इस स्थिति में फ़ॉन्ट-आकार को 100px से भी बड़ा सेट करने का प्रयास करें;

— यूजेन

यह क्रोम 53 में भी काम करता है। हालांकि, इसे heightबदलने का सुझाव दिया गया हैheight: 100%

— रैप्टर

दूसरा भी सफारी पर iOS में काम करता है। बहुत अच्छा!

— जनीस

Answer 3

आप LABEL तत्व पूर्व का उपयोग कर सकते हैं।

<div>
    <label for="browse">Click Me</label>
    <input type="file" id="browse" name="browse" style="display: none">//
</div>

यह इनपुट फ़ाइल को ट्रिगर करेगा

Comments

यह स्वीकृत उत्तर क्यों नहीं है? यह सबसे आसान तरीका है जिसके लिए फ़र्ज़ी जावास्क्रिप्ट की आवश्यकता नहीं है।

— tomitrescak

@tomitrescak ओपी को बेहतरीन जवाब मिलने का इंतजार नहीं है।

— माही

ध्यान रखें कि प्रश्न प्रस्तुत किए जाने के 7 साल बाद उत्तर पोस्ट किया गया था।

2018 में भी सर्वश्रेष्ठ उत्तर।

— मासूमाइफ़

2019 के लिए भी सर्वश्रेष्ठ उत्तर;)

— ग्विल्यूमोटियर

Answer 4

मैंने इसे IE8 +, हाल के एफएफ और क्रोम में काम (= परीक्षण) किया है:

$('#uploadInput').focus().trigger('click');

कुंजी पहले ध्यान केंद्रित कर रही है क्लिक को फायर करने (अन्यथा क्रोम इसे अनदेखा करता है)।

नोट: आप अपने इनपुट को प्रदर्शित और दृश्यमान होने के लिए आवश्यक करते हैं (जैसा कि, नहीं display:noneऔर नहीं visibility:hidden)। मैं सुझाव देता हूं (जैसा कि कई अन्य पहले है) पूरी तरह से इनपुट की स्थिति के लिए और इसे ऑफ स्क्रीन फेंक दें।

#uploadInput {
    position: absolute;
    left: -9999px;
}

Comments

उसके लिए +1। मैंने यह भी देखा कि आप आसपास के तत्व को छिपा सकते हैं, लेकिन फाइल इनपुट बटन को नहीं, फिर आसपास के तत्व को दिखा सकते हैं, बटन को फोकस कर सकते हैं, उसे सक्रिय कर सकते हैं, फिर बटन को छिपा सकते हैं।

— Stevo

Answer 5

मेरी बेला बाहर की जाँच करें।

http://jsfiddle.net/mohany2712/vaw8k/

.uploadFile {
  visibility: hidden;
}

#uploadIcon {
  cursor: pointer;
}

<body>
  <div class="uploadBox">
    <label for="uploadFile" id="uploadIcon">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Icon_-_upload_photo_2.svg/512px-Icon_-_upload_photo_2.svg.png"  width="20px" height="20px"/>
    </label>
    <input type="file" value="upload" id="uploadFile" class="uploadFile" />
  </div>
</body>

Answer 6

छिपने के बाद फ़ाइल इनपुट तत्व को अनदेखा किए जाने के बारे में adardesign ने इसे nailed किया। मैंने कई लोगों को तत्व के आकार को 0 में स्थानांतरित करने या स्थिति और अतिप्रवाह समायोजन के साथ सीमा से बाहर धकेलने पर भी ध्यान दिया। ये सभी महान विचार हैं।
एक वैकल्पिक तरीका जो पूरी तरह से अच्छी तरह से काम करता है वह सिर्फ अपारदर्शिता को 0 पर सेट करना है । तब आप हमेशा इसे अन्य तत्वों को ऑफसेट करने से रखने की स्थिति निर्धारित कर सकते हैं को कि छुपाता है। किसी भी दिशा में लगभग 10K पिक्सेल के तत्व को स्थानांतरित करना बस थोड़ा अनावश्यक लगता है।

यहाँ उन लोगों के लिए एक छोटा सा उदाहरण है जो एक चाहते हैं:

input[type='file']{
    position:absolute;
    opacity:0;
    /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    /* For IE5 - 7 */
    filter: alpha(opacity=0);
}

Answer 7

बस जिज्ञासा के लिए, आप कुछ ऐसा कर सकते हैं, जैसे आप डॉम ट्री से जोड़कर, डायनामिकली अपलोड फॉर्म और इनपुट फ़ाइल बनाकर चाहते हैं:

$('.your-button').on('click', function() {
    var uploadForm = document.createElement('form');
    var fileInput = uploadForm.appendChild(document.createElement('input'));

    fileInput.type = 'file';
    fileInput.name = 'images';
    fileInput.multiple = true;

    fileInput.click();
});

DOM पर uploadForm को जोड़ने की आवश्यकता नहीं है।

Comments

धन्यवाद! मैं 20 मिनट के लिए यह देख रहा हूँ!

— लाबो

Answer 8

सही कोड:

<style>
    .upload input[type='file']{
        position: absolute;
        float: left;
        opacity: 0; /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* For IE5 - 7 */
        filter: alpha(opacity=0);
        width: 100px; height: 30px; z-index: 51
    }
    .upload input[type='button']{
        width: 100px;
        height: 30px;
        z-index: 50;
    }
    .upload input[type='submit']{
        display: none;
    }
    .upload{
        width: 100px; height: 30px
    }
</style>
<div class="upload">
    <input type='file' ID="flArquivo" onchange="upload();" />
    <input type="button" value="Selecionar" onchange="open();" />
    <input type='submit' ID="btnEnviarImagem"  />
</div>

<script type="text/javascript">
    function open() {
        $('#flArquivo').click();
    }
    function upload() {
        $('#btnEnviarImagem').click();
    }
</script>

Answer 9

यह उद्देश्य और डिजाइन के आधार पर है। यह एक सुरक्षा मुद्दा है।

Answer 10

वास्तव में, मुझे इसके लिए एक बहुत आसान तरीका पता चला, जो है:

$('#fileinput').show().trigger('click').hide();   

इस तरह, आपके फ़ाइल इनपुट फ़ील्ड में कोई भी नहीं पर css संपत्ति का प्रदर्शन हो सकता है और फिर भी व्यापार जीत सकता है :)

Comments

यह धीमी मशीन पर स्क्रीन पर फ़्लिक कर सकता है। इष्टतम समाधान नहीं

— दिमित्री एफिमेंको

Answer 11

जवाब देने में बहुत देर हो चुकी है लेकिन मुझे लगता है कि यह न्यूनतम सेटअप सबसे अच्छा है। मैं भी उसी की तलाश में हूं।

  <div class="btn-file">
     <input type="file" class="hidden-input">
     Select your new picture
  </div>

// सीएसएस

.btn-file {
  display: inline-block;
  padding: 8px 12px;
  cursor: pointer;
  background: #89f;
  color: #345;
  position: relative;
  overflow: hidden;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  filter: alpha(opacity=0);
  opacity: 0;
  cursor: inherit;
  display: block;
}

jsbin

बूटस्ट्रैप फ़ाइल इनपुट बटन डेमो

Comments

इसका उत्तर देने में कभी देर नहीं की जाती है;)

— एगुयेलडेड गेराल्ड

कुछ साल बाद भी सबसे अच्छा जवाब IMO

— DimmuR

Answer 12

यह एक बहुत पुराना प्रश्न है, लेकिन दुर्भाग्य से यह मुद्दा अभी भी प्रासंगिक है और इसके समाधान की आवश्यकता है।

(सुपरइंडली सिंपल) समाधान जो मैं लेकर आया हूं, वह वास्तविक फ़ाइल इनपुट फ़ील्ड को "छिपाने" और इसे एक LABEL टैग (बूटस्ट्रैप और एचटीएमएल 5 पर आधारित हो सकता है, एन्हांसमेंट के लिए) के साथ लपेटना है।

See here:उदाहरण कोड यहाँ

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

उसके ऊपर, आप अपनी इच्छानुसार रूप और व्यवहार में हेरफेर कर सकते हैं (उदाहरण के लिए: फ़ाइल इनपुट फ़ाइल से चयनित फ़ाइल का नाम प्राप्त करें, चयनित होने के बाद, और इसे कहीं पर दिखाएं। LABEL तत्व स्वचालित रूप से ऐसा नहीं करता है। बेशक। मैं आमतौर पर इसे LABEL के अंदर रखता हूं, जैसा कि इसकी पाठ सामग्री)।

हालांकि सावधान! इस के रूप और व्यवहार का हेरफेर आप जो भी सोच सकते हैं और सोच सकते हैं, उस तक सीमित है। ;-) ;-)

Answer 13

मैंने एक साधारण $ (...) पर क्लिक किया (); JQuery के साथ 1.6.1

Comments

हम्म ने उत्सुक किया कि आपने मेरी वेबसाइट (www.iscriptdesign.com) पर $ ('फ़ाइल: इनपुट') कैसे किया है। क्लिक () कुछ भी नहीं करता है, और न ही $ ('फ़ाइल: इनपुट') ट्रिगर (') करता है। 'पर क्लिक करें);

— डेरी

यहां पूरा उदाहरण दिया गया है: <इनपुट प्रकार = "फ़ाइल" आईडी = "picBrowse" ... और फिर $ ('# picBrowse'); क्लिक करें ();

— वैलेंटाइन गैलिया

मैंने मैक ओएस पर cr (निश्चित नहीं है कि कौन सा संस्करण) पर परीक्षण किया, हालांकि XP ​​पर FF 4 पर काम करता है। धन्यवाद!

— डेरी जू

Answer 14

या फिर बस

$(':input[type="file"]').show().click().hide();

Answer 15

मुझे कस्टम क्लाइंट साइड सत्यापन के लिए समस्या थी, <input type="file"/>जबकि इसे ट्रिगर करने के लिए एक नकली बटन का उपयोग करके और @Gillailla Bodi के समाधान ने मेरे लिए काम किया ( opacity: 0;क्रोम पर भी )

$("#MyForm").on("click", "#fake-button", function () {
        $("#uploadInput").focus().trigger("click");
    });

और अपलोड इनपुट के लिए सीएसएस शैली

#uploadInput {
opacity: 0.0; 
filter: alpha(opacity=0); /* IE lt 8 */
-ms-filter: "alpha(opacity=0)"; /* IE 8 */
-khtml-opacity: 0.0; /* Safari 1.x */
-moz-opacity: 0.0;
}

Answer 16

यह कोशिश करो, यह एक हैक है। स्थिति: निरपेक्ष क्रोम के लिए है और ट्रिगर ('परिवर्तन') IE के लिए है।

var hiddenFile = $("<input type=\"file\" name=\"file\" id=\"file1\" style=\"position:absolute;left:-9999px\" />");
$('body').append(hiddenFile);

$('#aPhotoUpload').click(function () {
    hiddenFile.trigger('click');
    if ($.browser.msie)
        hiddenFile.trigger('change');
});

hiddenFile.change(function (e) {
    alert('TODO');
});

Comments

ध्यान दें कि $.browserjQuery के नए संस्करणों में चित्रित किया गया है

— केविन बील

Answer 17

मेरी समस्या आईओएस पर थोड़ी अलग थी। फास्टक्लिक चालू करने से समस्याएं पैदा हो रही थीं। मुझे बस इतना करना था class="needsclick"कि मेरे बटन को जोड़ दिया जाए।

Answer 18

यह संभवतः क्रॉस ब्राउज़र के मुद्दों को ध्यान में रखते हुए सबसे अच्छा जवाब है।

सीएसएस:

#file {
  opacity: 0;
  width: 1px;
  height: 1px;
}

जे एस:

$(".file-upload").on('click',function(){
   $("[name='file']").click();
});

HTML:

<a class="file-upload">Upload</a>
<input type="file" name="file">

Answer 19

मुझे लगता है कि मैं आपकी समस्या को समझता हूं, क्योंकि मेरे पास एक समान है। तो टैग <label>में एट्रीब्यूट है, आप इस एट्रिब्यूट का उपयोग अपने इनपुट को टाइप = "फाइल" से जोड़ने के लिए कर सकते हैं। लेकिन अगर आप इस लेबल का उपयोग करके इसे सक्रिय नहीं करना चाहते हैं क्योंकि आपके लेआउट के कुछ नियम, आप इस तरह से कर सकते हैं।

$(document).ready(function(){
  var reference = $(document).find("#main");
  reference.find(".js-btn-upload").attr({
     formenctype: 'multipart/form-data'
  });
  
  reference.find(".js-btn-upload").click(function(){
    reference.find("label").trigger("click");
  });
  
});

.hide{
  overflow: hidden;
  visibility: hidden;
  /*Style for hide the elements, don't put the element "out" of the screen*/
}

.btn{
  /*button style*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="main">
<form enctype"multipart/formdata" id="form-id" class="hide" method="post" action="your-action">
  <label for="input-id" class="hide"></label>
  <input type="file" id="input-id" class="hide"/>
</form>

<button class="btn js-btn-upload">click me</button>
</div>

बेशक आप इसे अपने उद्देश्य और लेआउट के लिए अनुकूलित करेंगे, लेकिन यह अधिक आसान तरीका है जिसे मैं इसे काम करना जानता हूं !!

Answer 20

Guillaume Bodi के जवाब के आधार पर मैंने ऐसा किया:

$('.fileinputbar-button').on('click', function() {
    $('article.project_files > header, article.upload').show();
    $('article.project_files > header, article.upload header').addClass('active');
    $('.file_content, article.upload .content').show();
    $('.fileinput-button input').focus().click();
    $('.fileinput-button').hide();
});

जिसका अर्थ है कि इसे शुरू करने के लिए छिपाया गया है और फिर ट्रिगर के लिए प्रदर्शित किया गया है, फिर तुरंत फिर से छिपा हुआ है।