從輸入字段獲取圖像以獲取圖像數據/顯示圖像

Question

我一直在環顧四周，無法找到這是否可能。

這是我想提交之前發生的事情：當用戶選擇要上傳的文件時，我想抓取圖像的數據並將其轉換爲base64。轉換完成後，我想直接將其顯示在div或通過AJAX發送到服務器，然後顯示在div中。

下面基本上就是我在尋找：

// index.php 
<input type="file" name="img" id="img" onChange="displayImg(this)"> 

// displayImg.js 
function displayImg(img) { 
    imgData = img.?; // How do I do this? 
    img64 =   // I know how to do this. 
    document.write("<img src='data:image/jpeg;base64,"+img64+"' />"); 
} 

Answer 1

function displayImage(evt){ 
    var files = evt.target.files; 
    var reader = new FileReader(); 

    reader.onload = function(frEvent) { 
     document.getElementById("renderImage").innerHTML = '<img src="'+frEvent.target.result+'" />'; 
    } 
    reader.readAsDataURL(files[0]); 
} 

上面的代碼爲我工作。它缺乏驗證和所有好東西，但這應該是一個很好的起點。