我有诸如绘图应用程序之类的东西。用户可以保存项目然后加载它们。当我第一次加载一个文件(例如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);
});
我可以删除/删除缓存文件吗?它甚至缓存在浏览器中吗?
这是因为你调用了onchange函数。如果您上传相同的文件,则文件输入的值与上次上传相比没有更改,因此不会被触发。这也解释了为什么如果您上传不同的文件它会起作用。无需清除缓存,您可以通过在读取文件后重置输入字段的值来解决此问题。
$("#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 = '';
}
});
因为输入正在缓存相同的文件值,所以当您再次加载相同的文件时,它会使用缓存来读取 value 属性。您需要做的就是在使用 input 元素时设置一个条件语句并将 input 的 value 属性设置为空字符串,它应该可以工作
input.value = "";
如果您使用事件处理程序,则
e.target.value = "";
尝试下面的代码,它应该可以工作。单击上传按钮时清除现有值。
$("#menu-open-file").click(function(e){
$('#menu-open-file').val('');
}
上述答案的唯一问题是您的 HTML 在上传后将不再显示文件名。相反,它会继续显示“未选择文件”,这可能会让用户感到困惑。
要解决此问题,您可以隐藏输入并将其替换为复制输入显示的标签,如下所示:
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);
详细解释了如何在此处执行此操作的文章:https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
在 Mozilla 中,一切都很好。但在 Chrome 中,我遇到了同样的问题:
reader.onload
没有在 change event
上再次上传相同的文件。javascript
,这是我的解决方案!
HTML:
<input type="file" accept="image/*" name="image" id="file-input"/>
Javascript:
const fileInput = document.getElementById("file-input");
// My EventListener with change event and my_function
fileInput.addEventListener("change", my_function);
// reader.onload was used in my_function
//################### THIS IS THE SOLUTION ###################
// Add this EventListener to fix the problem with chrome
fileInput.addEventListener("click", function() {
fileInput.value = "";
});
在
Typescript
中,一旦你得到了Event
,你就可以像这样解决它:
onInputChange(event: Event){
(event.target as HTMLInputElement).value = '';
}