从输入字段获取图像以获取图像数据/显示图像

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]); 
} 

上面的代码为我工作。它缺乏验证和所有好东西，但这应该是一个很好的起点。