0
저는 지난 6 시간 동안이 작업을하고 있습니다.잡히지 않은 DOMException : 'FileReader'에서 'readAsDataURL'을 실행하지 못했습니다. 객체가 이미 BLOB를 읽는 중입니다. (...)
나는 이미지 폴더를 선택하고 내 문서에 표시하는 웹 사이트를 만들려고합니다. 첫 번째 이미지가 표시되고 콘솔에 다음 오류가 표시됩니다.
는는 catch되지 않은 예외 : DOMException는 '을 FileReader'에 'readAsDataURL'을 실행하지 못했습니다. 개체가 이미 바쁜 독서 물방울입니다 (...) 문제가 인해 발생
내가 믿는 내 루프의 파일 리더이기 때문이다 비동기. 하지만 이것을 위해 전체 배열을 반복해야합니다. 그래서 내가 뭘 잘못하고 있습니까?
파일을로드하고 ("이미지 만 나중에 확인합니다") 어레이에로드 한 다음 각 파일을 한 번에 하나씩 읽습니다. 코드를 기능에 적용하기 전에 모든 기능을 단일 기능으로 수행했으며 작동합니다! HTML + 원본 및 현재 JS 코드를 포함했습니다. 시간을내어 주셔서 감사합니다.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tiled Image Viewer</title>
<script src="js/tiv.js"></script>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="main-wrap">
<form name="uploadForm">
<input id="images" type="file" webkitdirectory mozdirectory directory name="myFiles"
onchange="readAndShowFiles();" multiple/>
<span id="list"></span>
</form>
</div>
</body>
</html>
자바 스크립트 원본 :
function readAndShowFiles() {
var files = document.getElementById("images").files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
// Have to check that this is an image though
// using the file.name TODO
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(file) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img src="', e.target.result,
'" title="', escape(file.name), '">'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(file);
// Read in the image file as a data URL.
reader.readAsDataURL(file);
}
}
자바 스크립트 현재 :
나는 모든 이미지에 대해 같은 리더를 사용하려고했기 때문에 문제가 발생function readAndShowFiles() {
console.log("Checkpoint2"); //test
var tiv = new tivAPI();
var array = tiv.getLoadedImages();
tiv.showLoadedImages(array);
}
function tivAPI(){
var imagesarray = new Array();
return{
loadImages: function(){
console.log("Loading Files"); //test
var files = document.getElementById("images").files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
// Have to check that this is an image though
// using the file.name TODO
}
console.log(files.length); //test
return files;
},
getLoadedImages: function(){
imagesarray = this.loadImages();
console.log("Returning Files"); //test
console.log(imagesarray.length);
return imagesarray;
},
showLoadedImages: function(elem){
console.log("Showing Files"); //test
var files = elem;
var reader = new FileReader();
// Closure to capture the file information.
for (var i = 0; i < files.length; i++) {
var file = files[i];
reader.onload = (function(file) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img src="', e.target.result,
'" title="', escape(file.name), '">'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(file);
// Read in the image file as a data URL.
reader.readAsDataURL(file);
}
}
};
}