2013-07-22 19 views
6

<input type="file"/> में रद्द करने के बाद फ़ाइल साफ़ करने के बाद फ़ाइल को साफ़ करें और क्रोम में 'फ़ाइल चुनें' मोडल विंडो में रद्द करने के बाद फ़ाइल और पथ को साफ़ किया गया है, एफएफ और आईई फ़ाइल में रद्द करने के बाद छेड़छाड़ की जाती है। क्रोम में इस व्यवहार को बदलने का कोई तरीका है?इनपुट प्रकार = "फ़ाइल", क्रोम

+0

क्या आप एक पहेली बना सकते हैं और हमें बता सकते हैं कि आपका क्या मतलब है? धन्यवाद :) – GFP

उत्तर

0

यह आपके सवाल का जवाब आप भी पता नहीं लगा सकता जब बटन क्लिक किया जाता है cancel है:

How to detect when cancel is clicked on file input?

+1

सुरक्षा कारणों से यह असंभव है, आप जेएस में फ़ाइल इनपुट का मूल्य निर्धारित नहीं कर सकते – Powerslave

0

https://jsfiddle.net/dqL97q0b/1/

यहाँ चारों ओर एक काम है ताकि क्रोम नहीं कर सकते निकालें रद्द होने पर मौजूदा फ़ाइल उपयोगकर्ता दबाए जाते हैं।

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

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

नोट: कोड के अधिकांश बस, पेड़ों की कटाई कैसे चीजें काम को दिखाने के लिए, विशेष रूप से मैं उजागर करना चाहता था कि अगर आप इस तरह के onclick = "fileClicked (घटना)" तो के रूप में डोम तत्व में इनलाइन घटना श्रोताओं का उपयोग आपको घटना श्रोताओं को क्लोन में फिर से संलग्न करने की आवश्यकता नहीं है।

<!doctype html><html><head></head><body> 
 

 
<h2>Fix for Chrome Removing File when 'cancel' clicked</h2> 
 

 
Upload Image: <input id="imageUpload" type="file" onclick="fileClicked(event)" onchange="fileChanged(event)"> 
 
<br/><br/> 
 
<label for="videoUpload">Upload Video:</label> <input id="videoUpload" type="file" onclick="fileClicked(event)" onchange="fileChanged(event)"> 
 
<br/><br/> 
 
<div id="log"></div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script> 
 
    //This is All Just For Logging: 
 
    var debug = true;//true: add debug logs when cloning 
 
    var evenMoreListeners = true;//demonstrat re-attaching javascript Event Listeners (Inline Event Listeners don't need to be re-attached) 
 
    if (evenMoreListeners) { 
 
     var allFleChoosers = $("input[type='file']"); 
 
     addEventListenersTo(allFleChoosers); 
 
     function addEventListenersTo(fileChooser) { 
 
      fileChooser.change(function (event) { console.log("file(#" + event.target.id + ") : " + event.target.value.split("\\").pop()) }); 
 
      fileChooser.click(function (event) { console.log("open(#" + event.target.id + ")") }); 
 
     } 
 
    } 
 

 
    var clone = {}; 
 

 
    // FileClicked() 
 
    function fileClicked(event) { 
 
     var fileElement = event.target; 
 
     if (fileElement.value != "") { 
 
      if (debug) { console.log("Clone(#" + fileElement.id + ") : " + fileElement.value.split("\\").pop()) } 
 
      clone[fileElement.id] = $(fileElement).clone(); //'Saving Clone' 
 
     } 
 
     //What ever else you want to do when File Chooser Clicked 
 
    } 
 

 
    // FileChanged() 
 
    function fileChanged(event) { 
 
     var fileElement = event.target; 
 
     if (fileElement.value == "") { 
 
      if (debug) { console.log("Restore(#" + fileElement.id + ") : " + clone[fileElement.id].val().split("\\").pop()) } 
 
      clone[fileElement.id].insertBefore(fileElement); //'Restoring Clone' 
 
      $(fileElement).remove(); //'Removing Original' 
 
      if (evenMoreListeners) { addEventListenersTo(clone[fileElement.id]) }//If Needed Re-attach additional Event Listeners 
 
     } 
 
     //What ever else you want to do when File Chooser Changed 
 
    } 
 
    </script> 
 
</body></html>

https://jsfiddle.net/dqL97q0b/1/

0

सरल अभी तक प्रभावी समाधान: एक चर में फ़ाइल का संदर्भ रखने के लिए। हर बार जब इनपुट के परिवर्तन घटना आप निकाल दिया जाता है की जाँच करें:

if(input.files[0]) // truthy, falsey 
{ 
    var file = input.files[0]; 
} 

तो file नवीनतम चयनित फ़ाइल में शामिल होंगे और जब उपयोगकर्ता संवाद खुलता है, लेकिन बाहर रद्द कर दिया फ़ाइल संदर्भ बदला नहीं जाएगा और अभी भी पहले से शामिल चयनित फाइल

संबंधित मुद्दे