更改上传文件的内容后,在 IE 11 中第二次尝试不会触发 FileReader onload
FileReader onload not getting fired for second attempt in IE 11 after contents of the uploaded file is changed
FileReader
onload
当使用 IE11 仍然选择同一个文件但文件内容已更改时,第二次没有被触发,FireFox 一直被触发,Chrome.
操作详情
- 首次点击时,所有浏览器都可以(但 IE 有时仍然会丢失文件中的一些单词)。
- 之后我更改了文件的内容。
- 然后我点击第二次尝试
btnDownload
,Firefox 和 Chrome 仍在阅读更新的内容。但是 IE 不工作!
.html
<input type="file" id="fileSelect" style="" accept=".csv">
<a type="button" class="btn" id="btnDownload" onclick="csvDownload()"
download> CSV DOWNLOAD </a>
myjavascript.js
var fileInput = document.getElementById("fileSelect"); //<input type="file" id="fileSelect">
var result = "";
readFile = function() {
changeAPInfoName();
if (!isFileSupported()) {
console.log('The browser does not support the API.');
} else {
if (fileInput.files.length > 0) {
var reader = new FileReader();
reader.onload = function() {
result = reader.result;
alert("WANT TO GET HERE ,ALTHOUGH FILE CONTENTS ARE CHANGED.(IN IE 11)");
document.getElementById('MY_HIDDEN_FIELD').setAttribute('value',result);
}
reader.readAsText(fileInput.files[0]);
reader.onerror = function() {
console.log('The file cannot be read.'+fileInput.files[0].fileName);
};
}
// EVENT FOR DOWNLOAD BUTTON!!!!
function csvDownload(){
readFile();
// using ajax to sent info from files and get download file.
}
请帮我解决以下问题。
- 尽管文件内容已更改,我如何才能到达 reader.onload 方法中的行。
alert("WANT TO GET HERE ,ALTHOUGH FILE CONTENTS ARE CHANGED.(IN IE 11)");
.
替换此
reader.onload = function() {
result = reader.result;
alert("WANT TO GET HERE ,ALTHOUGH FILE CONTENTS ARE CHANGED.(IN IE 11)");
document.getElementById('MY_HIDDEN_FIELD').setAttribute('value',result);
}
与
reader.addEventListener("load",function(){
result = reader.result;
alert("WANT TO GET HERE ,ALTHOUGH FILE CONTENTS ARE CHANGED.(IN IE 11)");
document.getElementById('MY_HIDDEN_FIELD').setAttribute('value',result);
});
希望对您有所帮助。我遇到了同样的问题,我使用了这个方法并且有效
FileReader 工作示例:
<html>
<head>
<script>
function read(){
//Select the element containing file
var file =document.querySelector('input[type=file]').files[0];
//create a FileReader
reader = new FileReader();
//add a listener
reader.addEventListener('load',function(){
alert(reader.result);
},false);
if(file){
//ReadFile
reader.readAsDataURL(file);//You can read it in many other forms
}
}
</script>
</head>
<body>
<input type="file" name="myFile" id="myFile" onchange="read()">
</body>
</html>
有关 FileReader 的更多信息,请查看此文档:Link
FileReader
onload
当使用 IE11 仍然选择同一个文件但文件内容已更改时,第二次没有被触发,FireFox 一直被触发,Chrome.
操作详情
- 首次点击时,所有浏览器都可以(但 IE 有时仍然会丢失文件中的一些单词)。
- 之后我更改了文件的内容。
- 然后我点击第二次尝试
btnDownload
,Firefox 和 Chrome 仍在阅读更新的内容。但是 IE 不工作!
.html
<input type="file" id="fileSelect" style="" accept=".csv">
<a type="button" class="btn" id="btnDownload" onclick="csvDownload()"
download> CSV DOWNLOAD </a>
myjavascript.js
var fileInput = document.getElementById("fileSelect"); //<input type="file" id="fileSelect">
var result = "";
readFile = function() {
changeAPInfoName();
if (!isFileSupported()) {
console.log('The browser does not support the API.');
} else {
if (fileInput.files.length > 0) {
var reader = new FileReader();
reader.onload = function() {
result = reader.result;
alert("WANT TO GET HERE ,ALTHOUGH FILE CONTENTS ARE CHANGED.(IN IE 11)");
document.getElementById('MY_HIDDEN_FIELD').setAttribute('value',result);
}
reader.readAsText(fileInput.files[0]);
reader.onerror = function() {
console.log('The file cannot be read.'+fileInput.files[0].fileName);
};
}
// EVENT FOR DOWNLOAD BUTTON!!!!
function csvDownload(){
readFile();
// using ajax to sent info from files and get download file.
}
请帮我解决以下问题。
- 尽管文件内容已更改,我如何才能到达 reader.onload 方法中的行。
alert("WANT TO GET HERE ,ALTHOUGH FILE CONTENTS ARE CHANGED.(IN IE 11)");
.
替换此
reader.onload = function() {
result = reader.result;
alert("WANT TO GET HERE ,ALTHOUGH FILE CONTENTS ARE CHANGED.(IN IE 11)");
document.getElementById('MY_HIDDEN_FIELD').setAttribute('value',result);
}
与
reader.addEventListener("load",function(){
result = reader.result;
alert("WANT TO GET HERE ,ALTHOUGH FILE CONTENTS ARE CHANGED.(IN IE 11)");
document.getElementById('MY_HIDDEN_FIELD').setAttribute('value',result);
});
希望对您有所帮助。我遇到了同样的问题,我使用了这个方法并且有效
FileReader 工作示例:
<html>
<head>
<script>
function read(){
//Select the element containing file
var file =document.querySelector('input[type=file]').files[0];
//create a FileReader
reader = new FileReader();
//add a listener
reader.addEventListener('load',function(){
alert(reader.result);
},false);
if(file){
//ReadFile
reader.readAsDataURL(file);//You can read it in many other forms
}
}
</script>
</head>
<body>
<input type="file" name="myFile" id="myFile" onchange="read()">
</body>
</html>
有关 FileReader 的更多信息,请查看此文档:Link