एचटीएमएल <input type = 'फ़ाइल'> फ़ाइल चुनाव घटना

Question

चलो कहते हैं कि हम इस कोड को करते हैं:

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

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

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

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

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

Answer 1

परिवर्तन घटना को सुनें।

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

Answer 2

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

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

Answer 3

jQuery रास्ता:

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

    // your code 
}); 

Answer 4

.. बदलें घटना भले ही आप को रद्द पर क्लिक कहा जाता हो जाता है

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 { 
 
\t color: red; 
 
\t transform: scale(1.5); 
 
\t 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"> 
 
    \t  <input id="filePoster" type="file" class="form-control" name="photo" required="required" multiple="multiple" /> 
 
\t  <button id="submitFiles" class="btn btn-primary" type="submit" name="button">Submit</button> 
 
     </div> 
 
    </form> 
 
</section>