入力フィールドから画像を取得して画像データを取得する/画像を表示

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

コードは私のために動作します。それは検証とすべての良いものが欠けていますが、これはあなたのための良い出発点でなければなりません。