HTML <इनपुट प्रकार = 'फ़ाइल'> फ़ाइल चयन घटना

Question

मान लें कि हमारे पास यह कोड है:

<form action='' method='POST' enctype='multipart/form-data'>
    <input type='file' name='userFile'><br>
    <input type='submit' name='upload_btn' value='upload'>
</form>

जो इस में परिणाम:

जब उपयोगकर्ता 'ब्राउज़ ...' बटन पर क्लिक करता है, तो एक फ़ाइल खोज संवाद बॉक्स खोला जाता है:

उपयोगकर्ता फ़ाइल को डबल क्लिक करके या 'ओपन' बटन पर क्लिक करके फ़ाइल का चयन करेगा।

क्या कोई जावास्क्रिप्ट ईवेंट है जिसे मैं फ़ाइल के चयन के बाद अधिसूचित करने के लिए उपयोग कर सकता हूं?

Comments

क्या एक अजीब पुरानी खिड़कियां UI!

— एल-ब्यूरिटोस

@ El-Burritos यह 2010 में पोस्ट किया गया था; बेशक, यह एक पुरानी विंडोज यूआई है: डी

— साइमन चेंग

Answer 1

बदलाव की घटना सुनें।

input.onchange = function(e) { 
  ..
};

Comments

हम इसे लिखने वाले हैं जहाँ .. जावास्क्रिप्ट स्क्रिप्ट टैग में

— चंद्रमा

हां स्क्रिप्ट टैग में, या आप इसे एक विशेषता के रूप में जोड़ सकते हैं ( <input type="file" onchange="..." />) हालांकि यह अनुशंसित नहीं है।

— अनुराग

ध्यान दें कि IE7 और 8 में कि 'परिवर्तन' घटना फार्म घटना तक बुलबुला नहीं है। आपको अपने श्रोता को <इनपुट> टैग पर रखना होगा।

— xer0x

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

— bryc

ध्यान दें, यह काम नहीं करता है यदि उपयोगकर्ता एक ही फ़ाइल को एक पंक्ति में एक से अधिक बार चुनता है क्योंकि फ़ाइल परिवर्तित नहीं हुई है।

— bob0the0mighty

Answer 2

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

document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick

Comments

यह ठीक काम करता है लेकिन अजीब आईई <11 व्यवहार के बारे में पता होना चाहिए। यह आपको इनपुट के मूल्य को बदलने की अनुमति नहीं देता है, इसलिए सबसे अधिक संभावना है कि आपको वर्कअराउंड की आवश्यकता होगी। stackoverflow.com/questions/9011644/…

— ओलेकेंड्रा टाकेलेंको

Answer 3

jQuery तरीका:

$('input[name=myInputName]').change(function(ev) {

    // your code
});

Answer 4

यदि आप रद्द पर क्लिक करते हैं तो भी चेंज ईवेंट को कॉल किया जाता है।

Comments

यह मदद करेगा यदि आप अपने उत्तर को स्पष्ट करने के लिए कुछ कोड प्रदान करेंगे, क्योंकि प्रश्न कोड स्निपेट में कोई परिवर्तन घटना नहीं है

— DevDig

मुझे लगता है कि @anthony निम्नलिखित परिदृश्य का जिक्र कर रही है: एक फ़ाइल का चयन करें। अब फाइल सेलेक्टर को फिर से खोलें, लेकिन इस बार कैंसिल पर क्लिक करें। चूंकि दूसरी बार कोई फ़ाइल नहीं चुनी गई थी, इसलिए फ़ाइल इनपुट नियंत्रण रीसेट करता है, इस प्रकार इसका प्रारंभिक चयन बदल जाता है, और परिवर्तन घटना निकाल दी जाती है।

— DVlsc

मैंने इसे Chrome 83 पर आज़माया और जब मैं रद्द करें बटन पर क्लिक करता हूं तो यह घटना नहीं होती है। यह उत्तर बहुत पुराना है और मुझे लगता है कि इसे कम से कम क्रोम पर तय किया गया होगा।

— सईद अहदीयन

Answer 5

इस तरह से मैंने इसे शुद्ध जेएस के साथ किया:

var files = document.getElementById('filePoster');
var submit = document.getElementById('submitFiles');
var warning = document.getElementById('warning');
files.addEventListener("change", function () {
  if (files.files.length > 10) {
    submit.disabled = true;
    warning.classList += "warn"
    return;
  }
  submit.disabled = false;
});

#warning {
    text-align: center;
}

#warning.warn {
	color: red;
	transform: scale(1.5);
	transition: 1s all;
}

<section id="shortcode-5" class="shortcode-5 pb-50">
    <p id="warning">Please do not upload more than 10 images at once.</p>
    <form class="imagePoster" enctype="multipart/form-data" action="/gallery/imagePoster" method="post">
        <div class="input-group">
  	    <input id="filePoster" type="file" class="form-control" name="photo" required="required" multiple="multiple" />
	    <button id="submitFiles" class="btn btn-primary" type="submit" name="button">Submit</button>
        </div>
    </form>
</section>