上傳一張圖片，並使用該網站臨時將其存儲在網頁中

-1

嘗試了網站內的所有內容，對其進行了測試，然後按照說明操作，但無濟於事，我哪裏出錯了？上傳一張圖片，並使用該網站臨時將其存儲在網頁中

網站：http://www.xul.fr/en/html5/filereader.php

我想要做的是上傳圖片，並將其存儲在網頁中暫時通過javascript使用或不使用任何服務器內，我試圖編譯代碼：

<!DOCTYPE HTML> 
<html> 
<head> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
</head> 

<script> 
if (window.File && window.FileReader && window.FileList && window.Blob) 
    document.write("<b>File API supported.</b> <br />"); 
else 
    document.write('<i>File API not supported by this browser.</i> <br />'); 
</script> 

<form name="form1" method="post" action> 
    <input type="file" id="getimage"> 
</form> 

<script language="javascript" > 

function imageHandler(e2) 
{ 
    var store = document.getElementById('imgstore'); 
    store.innerHTML='<img src="' + e2.target.result +'">'; 
} 
function loadimage(e1) 
{ 
    var filename = e1.target.files[0]; 
    var fr = new FileReader(); 
    fr.onload = imageHandler; 
    fr.readAsDataURL(filename); 
} 
window.onload=function() 
{ 
    var x = document.getElementById("filebrowsed"); 
    x.addEventListener('change', readfile, false); 
    var y = document.getElementById("getimage"); 
    y.addEventListener('change', loadimage, false); 
} 

</script> 

<fieldset><legend>Your image here</legend> 
    <div id="imgstore"> 
    </div> 
</fieldset> 

</html>

我想他有一些嵌入式腳本，或者我不知道我實際上是否遵循他所說的任何擡頭？或任何想法？

OT：對於之前的模糊帖子感到抱歉，感覺不好，並沒有心情，但我需要感謝這件作品。

來源

2013-01-05 psyko666

首先我沒有在頁面上看到正確的HTML元素，也沒有看到您已經連接到x上的事件偵聽器的「讀取文件」函數。

其次，你沒有上傳圖片，你正在閱讀它。而你沒有儲存圖像，你正在顯示它。

現在已經過時了。

要使用文件閱讀器，我們需要一個輸入類型=「文件」。在您正確複製時，我們需要在該元素上添加一個事件偵聽器來偵聽「更改」事件。在連接到事件監聽器的函數內部，我們需要創建一個FileReader對象並從事件中讀取數據。檢查，我們也得到了。現在我們可以在Reader對象上掛接完成加載的函數。在這個函數內部，我們要創建一個新的Image（）並將它的src屬性賦值給FileReaders加載的結果。爲了顯示圖像，我們還需要監聽圖像上的加載事件，我們只需將圖像追加到需要去的頁面。

所以代碼可能看起來像這樣。

var imageLoader = document.getElementById('getimage'); 
imageLoader.addEventListener('change', handleImage, false); 


function handleImage(e){ 
    var reader = new FileReader(); 
    reader.onload = function(event){ 
     var img = new Image(); 
     img.onload = function(){ 
      document.body.appendChild(img); 
     } 
     img.src = event.target.result; 
    } 
    reader.readAsDataURL(e.target.files[0]);  
}

來源

2013-01-05 04:57:36 DerekR

上傳一張圖片，並使用該網站臨時將其存儲在網頁中

回答

相關問題