JavaScript：使用數據URI無法顯示多個圖像URI：無聲瀏覽器錯誤

這是瀏覽器拒絕執行完整請求的那些無聲瀏覽器錯誤之一。下面的代碼（只需創建一個名爲exaple.xhtml的文件進行測試，確保您沒有使用基於Microsoft編輯器的字節順序標記）就是所有的工作代碼。當您選擇多張圖片時，它只會在Firefox，Opera和Chrome中顯示其中一張圖片。JavaScript：使用數據URI無法顯示多個圖像URI：無聲瀏覽器錯誤

如果有人能詳細解釋無聲的bug問題（我已經用在以前的情況下的setTimeout得到解決）我會贊成票他們的回答上接受它作爲回答的頂部。

example.xhtml

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>Image Preview</title> 
<script type="text/javascript"> 
//<![CDATA[ 

var fr = new FileReader(); 

fr.onload = function(e) 
{ 
var thumb = document.createElement('img'); 
thumb.setAttribute('src',e.target.result); 
document.getElementById('images_preview').appendChild(thumb); 
} 


function images_preview() 
{ 
for (var i = 0; i < document.getElementById('post_files').files.length; i++) 
{ 
    var f = document.getElementById('post_files').files[i]; 
    fr.readAsDataURL(f); 
} 
} 
//]]> 
</script> 
</head> 

<body> 

<form action="" method="post" enctype="multipart/form-data"> 
<fieldset> 
<input id="post_files" name="post_files" multiple="multiple" onchange="images_preview();" size="256" type="file" /> 
</fieldset> 
</form> 

<div id="images_preview"></div> 

</body> 
</html>

來源

2012-03-14 John

原來，onloadend方法正是我需要的。這是我上面編碼的完全固定/工作版本...

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>Image Preview</title> 
<script type="application/javascript"> 
//<![CDATA[ 
function images_preview() 
{ 
for (var i = 0; i < document.getElementById('post_files').files.length; i++) 
{ 
    var fr = new FileReader(); 
    var dataurl = fr.readAsDataURL(document.getElementById('post_files').files[i]); 

    fr.onloadend = function(e) 
    { 
    var thumb = document.createElement('img'); 
    thumb.setAttribute('src',e.target.result); 
    document.getElementById('images_preview').appendChild(thumb); 
    } 
} 
} 
//]]> 
</script> 
</head> 

<body> 

<form action="" method="post" enctype="multipart/form-data"> 
<fieldset> 
<input id="post_files" name="post_files" multiple="multiple" onchange="images_preview();" size="256" type="file" /> 
</fieldset> 
</form> 

<div id="images_preview"></div> 

</body> 
</html>

來源

2012-03-15 23:38:14 John

我懷疑你的麻煩來自於努力是做處理文件之前重用讀者。瀏覽器無法無視這個問題太糟糕了。總之，如果你以下Mozilla的文檔example在使用新的閱讀器爲每個文件一樣，你應該確定：

function handleFiles(files) { 
    for (var i = 0; i < files.length; i++) { 
    var file = files[i]; 
    var imageType = /image.*/; 

    if (!file.type.match(imageType)) { 
     continue; 
    } 

    var img = document.createElement("img"); 
    img.classList.add("obj"); 
    img.file = file; 
    preview.appendChild(img); 

    var reader = new FileReader(); 
    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); 
    reader.readAsDataURL(file); 
    } 
}

來源

2012-03-14 05:45:11

你很近，結果我需要使用onloadend方法。我在上面發佈了我的答案。 – John 2012-03-15 23:39:10

JavaScript：使用數據URI無法顯示多個圖像URI：無聲瀏覽器錯誤

回答

相關問題