Trình xử lý quảng cáo - tải lên cùng một tệp một lần nữa không hoạt động

Question

Tôi có sth giống như ứng dụng vẽ. Người dùng có thể lưu dự án và sau đó tải chúng. Khi tôi tải lần đầu tiên một tệp (ví dụ: project1.leds) thực hiện một số thay đổi trong ứng dụng nhưng không lưu nó và sau đó lại tải cùng một tệp (project1.leds), không có gì xảy ra. Tôi không thể tải cùng một tệp nhiều lần. Nếu tôi tải tập tin khác, nó làm việc.

Code:

$("#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); 
}); 

Tôi có thể xóa/gỡ bỏ các tập tin được lưu trữ? Nó có được lưu trữ trong trình duyệt không?

Answer 1

Đó là vì bạn đang gọi chức năng onchange. Nếu bạn tải lên cùng một tệp, giá trị của đầu vào tệp không thay đổi so với lần tải lên trước đó và do đó không được kích hoạt. Điều này cũng giải thích lý do tại sao nó hoạt động nếu bạn tải lên một tệp khác. Không cần xóa bộ nhớ cache, bạn có thể giải quyết vấn đề này bằng cách đặt lại giá trị của trường nhập sau khi bạn đọc tệp.

$("#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

Vấn đề duy nhất với câu trả lời ở trên là HTML của bạn sẽ không còn hiển thị tên tệp sau khi tải lên. Thay vào đó, nó sẽ tiếp tục nói "Không có tệp được chọn", điều này có thể gây nhầm lẫn cho người dùng.

Để làm được việc này, bạn có thể ẩn các đầu vào và thay thế bằng một nhãn mà sao chép màn hình hiển thị của đầu vào, như vậy:

HTML:

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

CSS:

#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; 
} 

JavaScript:

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); 

cũng đã giải thích bài viết cách thực hiện việc này tại đây: https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/