फ़ाइलreader - उसी फ़ाइल को दोबारा अपलोड न करें

Question

मेरे पास ड्राइंग ऐप की तरह sth है। उपयोगकर्ता परियोजनाओं को बचा सकता है और फिर उन्हें लोड कर सकता है। जब मैं पहली बार एक फ़ाइल लोड करता हूं (उदाहरण के लिए project1.leds) ऐप में कुछ बदलाव करता है लेकिन इसे सहेजता नहीं है और फिर फिर उसी फ़ाइल को लोड करता है (project1.leds) कुछ भी नहीं होता है। मैं एक ही फाइल को एक से अधिक बार लोड नहीं कर सकता। अगर मैं दूसरी फाइल लोड करता हूं, तो यह काम करता है।

कोड:

$("#menu-open-file").change(function(e){ 
    var data=[]; 

    var file = null; 
    file = e.target.files[0]; 
    console.log(file) 
    var reader = new FileReader(); 
     reader.onload = function(e){ 
      data=JSON.parse(reader.result); 
      x=data[0].SIZE[0]; 
      y=data[0].SIZE[1]; 
      if(x==15) x=16; 
      if(x==30) x=32; 
      if(x==60) x=64; 
      if(y==15) y=16; 
      if(y==30) y=32; 
      if(y==60) y=64; 
      createLeds(x,y,data,false,false); 
      clearActiveTools(); 
      var svg = $('#contener').find('svg')[0]; 
       svg.setAttribute('viewBox','0 0 ' + x*20 + ' ' + y*20); 
      $("#contener").css("width",x*20).css("height",y*20); 
      $("#contener").resizable({ 
       aspectRatio: x/y, 
       minHeight: 200, 
       minWidth: 200, 
      }); 
      wiFirst = $("#contener").width(); 
      hiFirst = $("#contener").height(); 
     } 
     reader.readAsText(file); 
}); 

मैं हटाना/कैश की गई फ़ाइल हटा सकते हैं? क्या यह ब्राउज़र में भी कैश किया गया है?

Answer 1

ऐसा इसलिए है क्योंकि आप फ़ंक्शन का आदान-प्रदान कॉल कर रहे हैं। यदि आप एक ही फ़ाइल अपलोड करते हैं तो फ़ाइल इनपुट का मान पिछले अपलोड से नहीं बदला गया है और इसलिए ट्रिगर नहीं किया गया है। यह भी बताता है कि यदि आप एक अलग फ़ाइल अपलोड करते हैं तो यह क्यों काम करता है। कैश को साफ़ करने की कोई आवश्यकता नहीं है, आप फ़ाइल को पढ़ने के बाद इनपुट फ़ील्ड के मान को रीसेट करके इसके आसपास काम कर सकते हैं।

$("#menu-open-file").change(function(e){ 
    var data=[]; 

    var file = null; 
    file = e.target.files[0]; 
    if(file !== ''){ 
     console.log(file) 
     var reader = new FileReader(); 
     reader.onload = function(e){ 
      data=JSON.parse(reader.result); 
      x=data[0].SIZE[0]; 
      y=data[0].SIZE[1]; 
      if(x==15) x=16; 
      if(x==30) x=32; 
      if(x==60) x=64; 
      if(y==15) y=16; 
      if(y==30) y=32; 
      if(y==60) y=64; 
      createLeds(x,y,data,false,false); 
      clearActiveTools(); 
      var svg = $('#contener').find('svg')[0]; 
       svg.setAttribute('viewBox','0 0 ' + x*20 + ' ' + y*20); 
      $("#contener").css("width",x*20).css("height",y*20); 
      $("#contener").resizable({ 
       aspectRatio: x/y, 
       minHeight: 200, 
       minWidth: 200, 
      }); 
      wiFirst = $("#contener").width(); 
      hiFirst = $("#contener").height(); 
     } 
     reader.readAsText(file); 
     $("#menu-open-file")[0].value = ''; 
    } 
}); 

Answer 2

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

इस के आसपास पाने के लिए आपको इनपुट छिपाने के लिए और एक लेबल है कि इनपुट के प्रदर्शन प्रतिकृति, इसलिए तरह से बदलने के कर सकते हैं:

HTML:

<input type="file" id="myFileInput" /> 
<label id="myFileLabel" for="myFileInput">Choose file</label><span id="myFileName">No file chosen</span> 

सीएसएस:

#myFileInput { 
    display: none; 
} 
#myFileLabel { 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    cursor: pointer; 
    font-size: 12px; 
    margin-top: 5px;   
    padding-left: 6px; 
    padding-right: 6px; 
} 
#myFileName { 
    margin-left: 5px; 
} 

जावास्क्रिप्ट:

var file = null 
file = e.target.files[0]; 

//variable to get the name of the uploaded file 
var fileName = file.name; 
//replace "No file chosen" with the new file name 
$('#myFileName').html(fileName); 

अच्छी तरह से समझाया गया लेख यह कैसे करें: https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/