HTML इनपुट फ़ाइल चयन घटना एक ही फ़ाइल का चयन करने पर फायरिंग नहीं

Question

क्या किसी inputप्रकार के एचटीएमएल fileतत्व के उपयोगकर्ता के लिए बनाई गई हर फ़ाइल का पता लगाने का कोई मौका है ?

यह पहले कई बार पूछा गया था, लेकिन आमतौर पर प्रस्तावित onchangeघटना में आग नहीं लगती है यदि उपयोगकर्ता फिर से उसी फ़ाइल का चयन करता है।

Comments

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

— केरान

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

— ड्रोनस

हो सकता है inputकि फ़ाइल के साथ कुछ करने के बाद अगर हम 'मान' को '' पर सेट करते हैं तो यह व्यवहार हो सकता है । लेकिन यह दृश्यमान फ़ाइल नाम को भी हटा देगा। हालाँकि, यह ठीक हो सकता है, क्योंकि फ़ाइल वास्तव में संसाधित है और उस कार्रवाई का परिणाम कहीं और दिखाई दे सकता है।

— ड्रोनस

Plz Que स्पष्ट कीजिए कि आप क्या करना चाहते हैं?

— चैंपियन

मैं बस इतना चाहता हूं कि पुराने स्कूल के व्यवहार के डेस्कटॉप अनुप्रयोगों को अनुकरण करना है। यदि मैं एक ही फाइल को फिर से डेस्कटॉप एप्लिकेशन में 'ओपन' करता हूं, तो इसे आमतौर पर फिर से लोड किया जाता है, या यदि कुछ एक्शन फाइल के साथ किया जाता है (जैसे इसे उदाहरण के लिए एक और प्रारूप में परिवर्तित करना) तो यह कार्रवाई फिर से की जाती है। यह वही है जो डेस्कटॉप उपयोगकर्ता वेब ऐप से भी उम्मीद कर सकते हैं, लेकिन fileइनपुट onchangeईवेंट समान नहीं है।

— ड्रोनस

Answer 1

का मान निर्धारित inputकरने के लिए nullप्रत्येक पर onclickघटना। यह उसी पथ को चुनने पर भी ईवेंट के inputमूल्य को रीसेट करेगा और onchangeईवेंट को ट्रिगर करेगा ।

input.onclick = function () {
    this.value = null;
};

input.onchange = function () {
    alert(this.value);
};​

यहाँ एक डेमो है ।

नोट: यदि आपकी फ़ाइल 'C: \ fakepath \' के साथ उपसर्गित है तो यह सामान्य है। यह एक सुरक्षा सुविधा है जो फ़ाइल के निरपेक्ष पथ को जानने से जावास्क्रिप्ट को रोकती है। ब्राउज़र अभी भी इसे आंतरिक रूप से जानता है।

Comments

मैंने डेमो की कोशिश की, लेकिन (क्रोम 21 का उपयोग करके) मैं `C: \ fakepath` + प्राप्त करता रहता हूं, फिर मैंने जो फ़ाइल नाम चुना (पथ को छोड़कर)। हालांकि अलर्ट उसी फ़ाइल के प्रत्येक चयन पर दिखाया जाता है।

— जैस्पर डे व्रीज

@JasperdeVries एक सुरक्षा सुविधा है जो जावास्क्रिप्ट को एक फ़ाइल के निरपेक्ष पथ को जानने से रोकती है। ब्राउज़र अभी भी आंतरिक रूप से पथ जानता है।

— ब्रायन उस्तास

एक तरफ के रूप में, नल <इनपुट प्रकार = "फ़ाइल"> के लिए एकमात्र अनुमत मूल्य है। तो अगर आप इसे अपरिभाषित करने और अपवाद पाने की कोशिश कर रहे हैं, तो यही कारण है कि।

— नोएल अब्राहम

यह IE11 में अच्छी तरह से काम नहीं करता है जब तक आप एक छोटा सा परिवर्तन करना: डेमो ।

इसे this.value = nullअंत में रखना बेहतर है onchangeक्योंकि एक इनपुट तत्व को सक्रिय करना संभव है, बिना उस पर क्लिक किए (कीबोर्ड का उपयोग करके)। input.filesयदि आपको बाद में इसे संदर्भित करने की आवश्यकता है तो आप स्टोर कर सकते हैं ।

— हेल्सिओन

Answer 2

<form enctype='multipart/form-data'>
    <input onchange="alert(this.value); this.value=null; return false;" type='file'>
    <br>
    <input type='submit' value='Upload'>
</form>

this.value=null; केवल क्रोम के लिए आवश्यक है, फ़ायरफ़ॉक्स बस के साथ ठीक काम करेगा return false;

यहाँ एक FIDDLE है

Comments

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

— अतुल चौधरी

Answer 3

इस लेख में, "चयन के लिए प्रपत्र इनपुट का उपयोग" शीर्षक के तहत

http://www.html5rocks.com/en/tutorials/file/dndfiles/

<input type="file" id="files" name="files[]" multiple />

<script>
function handleFileSelect(evt) {

    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
     // Code to execute for every file selected
    }
    // Code to execute after that

}

document.getElementById('files').addEventListener('change', 
                                                  handleFileSelect, 
                                                  false);
</script>

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

Comments

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

— Thor84no

आप अपने परीक्षण के लिए किस वातावरण का उपयोग करते हैं? क्रोम के साथ मेरा अनुभव वह था जिसे मैंने प्रश्न में कहा था, यह changeघटना केवल फ़ाइल नाम परिवर्तन पर आग लगा देगी।

— ड्रोनस

Answer 4

प्रत्येक बार उपयोगकर्ता द्वारा फ़ील्ड पर क्लिक किए जाने पर, लक्ष्य इनपुट के मूल्य को साफ़ करने के लिए onClick घटना का उपयोग करें। यह सुनिश्चित करता है कि ऑनकेंज इवेंट को उसी फ़ाइल के लिए ट्रिगर किया जाएगा। मेरे लिए काम किया :)

onInputClick = (event) => {
    event.target.value = ''
}

<input type="file" onChange={onFileChanged} onClick={onInputClick} />

टाइपस्क्रिप्ट का उपयोग करना

onInputClick = ( event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
    const element = event.target as HTMLInputElement
    element.value = ''
}

Comments

समाधान के लिए धन्यवाद।

— दीपक टेकचंदानी

Answer 5

फ़ाइल लोड सफलतापूर्वक होने के बाद आप जो भी करना चाहते हैं, करें। आपकी फ़ाइल प्रसंस्करण के पूरा होने के बाद फ़ाइल नियंत्रण का मान को रिक्त करने के लिए सेट करें।। Tochange () को हमेशा फ़ाइल नाम परिवर्तन या नहीं भी कहा जाएगा। उदाहरण के लिए आप यह काम कर सकते हैं और मेरे लिए आकर्षण की तरह काम कर सकते हैं

   $('#myFile').change(function () {
       LoadFile("myFile");//function to do processing of file.
       $('#myFile').val('');// set the value to empty of myfile control.
    });

Answer 6

handleChange({target}) {
    const files = target.files
    target.value = ''
}

Comments

हे सहकर्मी! कोड-केवल उत्तर समस्या को हल कर सकते हैं लेकिन वे बहुत अधिक उपयोगी हैं यदि आप बताते हैं कि वे इसे कैसे हल करते हैं। समुदाय को आपके उत्तर को पूरी तरह समझने के लिए सिद्धांत के साथ-साथ कोड की भी आवश्यकता होती है।

— आरबीटी

हालांकि यह कोड प्रश्न को हल कर सकता है, जिसमें यह भी बताया गया है कि यह समस्या कैसे और क्यों हल करती है, इससे वास्तव में आपके पोस्ट की गुणवत्ता को बेहतर बनाने में मदद मिलेगी, और संभवत: अधिक वोट मिले। याद रखें कि आप भविष्य में पाठकों के लिए सवाल का जवाब दे रहे हैं, न कि केवल उस व्यक्ति से जो अब पूछ रहा है। कृपया स्पष्टीकरण जोड़ने के लिए अपने उत्तर को संपादित करें और संकेत दें कि क्या सीमाएँ और मान्यताएँ लागू होती हैं। रिव्यू से

— डबल-बीप

Answer 7

मेरे लिए काम किए गए इनपुट के 0 वें सूचकांक के मूल्य को साफ़ करना । कृपया नीचे दिए गए कोड को आज़माएं, आशा है कि यह काम करेगा (AngularJs)।

          scope.onClick = function() {
            input[0].value = "";
                input.click();
            };