पता करें कि 'रद्द करें' फ़ाइल इनपुट पर क्लिक किया गया

Question

मैं जो का उपयोग करता है एक हैक विभिन्न स्थानों में वर्णित उपयोग करने की कोशिश:

document.body.onfocus = checkOnCancel(); 

एक उदाहरण:

var fileSelectEle = document.getElementById('fileinput'); 

fileSelectEle.onclick = charge; 

function charge() 
{ 
    document.body.onfocus = checkOnCancel; 
} 

function checkOnCancel() 
{ 
    alert("FileName:" + fileSelectEle.value + "; Length: " + fileSelectEle.value.length); 
    if(fileSelectEle.value.length == 0) alert('You clicked cancel!') 
    else alert('You selected a file!'); 
    document.body.onfocus = null; 
} 

वहाँ कुछ गड़बड़ यहाँ है? क्योंकि fileSelectedEle.value हमेशा पिछले निष्पादन मान देता है और उपयोगकर्ता द्वारा चयनित नहीं किया जाता है। क्या यह इनपुट फ़ाइल का अपेक्षित व्यवहार है? चयनित वास्तविक फ़ाइल को पढ़ने के लिए इसे कैसे हल करें?

http://jsfiddle.net/smV9c/2/

आप द्वारा त्रुटि पुन: पेश कर सकते हैं:

चरण 1: SelectFile - कुछ कुछ फ़ाइल का चयन करें (और नोटिस उत्पादन)

चरण 2: SelectFile - प्रेस को रद्द (और नोटिस आउटपुट)

Answer 1

एक समाधान input की घटना का उपयोग करना है।

var fileSelectEle = document.getElementById('fileinput'); 

fileSelectEle.onchange = function() 
{ 
    if(fileSelectEle.value.length == 0) { 
    alert('You clicked cancel - ' + "FileName:" + fileSelectEle.value + "; Length: " + fileSelectEle.value.length); 
    } else { 
    alert('You selected a file - ' + "FileName:" + fileSelectEle.value + "; Length: " + fileSelectEle.value.length); 
    } 
} 

यह, चयनित फ़ाइल नाम में परिवर्तन करने के लिए सही ढंग से प्रतिक्रिया करता है के रूप में आप यहाँ परीक्षण कर सकते हैं: http://jsfiddle.net/munderwood/6h2r7/1/

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

मुझे यकीन है कि क्यों अपने मूल प्रयास काम नहीं किया के लिए पता नहीं है, हालांकि मेरे सबसे अच्छे अनुमान है कि यह onfocus घटना अतुल्यकालिक रूप से फायरिंग के साथ एक समय मुद्दा है, और इससे पहले कि input नियंत्रण के गुणों के अपडेट हो गया है।

अद्यतन: निर्धारित करने के लिए क्या उपयोगकर्ता हर बार जब वे फ़ाइल संवाद को बंद का चयन किया है, कुछ भी नहीं बदला है, भले ही, समय मुद्दा skirted किया जा सकता है फिर से प्राप्त करने के फोकस के बीच में कुछ विलंब जोड़ने, और के मान की जाँच करके फ़ाइल इनपुट। फोकस प्राप्त करने के तुरंत बाद checkOnCancel पर कॉल करने के बजाय, charge का निम्न संस्करण इसे बाद में दसवें स्थान का कारण बनता है।

function charge() { 
    document.body.onfocus = function() { setTimeout(checkOnCancel, 100); }; 
} 

यहां एक कार्य संस्करण है: http://jsfiddle.net/munderwood/6h2r7/2/।

Answer 2

क्या यहां कुछ गड़बड़ है? चूंकि fileSelectedEle.value हमेशा पिछले निष्पादन मान देता है और उपयोगकर्ता द्वारा चुने गए नहीं। क्या यह इनपुट फ़ाइल का अपेक्षित व्यवहार है? चयनित वास्तविक फ़ाइल को पढ़ने के लिए इसे कैसे हल करें?

कुछ भी गलत नहीं है, यह व्यवहार की उम्मीद है। यदि उपयोगकर्ता फ़ाइल चयन प्रक्रिया को रद्द कर देता है, तो ऐसा लगता है कि उन्होंने इसे कभी शुरू नहीं किया है। तो पिछले मूल्य जगह में छोड़ दिया गया है।

Answer 3

आप window.focus ईवेंट में हुक कर सकते हैं जो विंडो की फ़ाइल का चयन करें बॉक्स को रद्द करते समय निकाल दिया जाता है। फिर यह देखने के लिए जांचें कि क्या वास्तव में एक फ़ाइल चयनित है या नहीं।