phpとjavascriptでプレビュー付きの画像アップローダーを作成

Question

私のデスクトップから画像をプルしてプレビューできないようです。私は何がわからない。それがすべてだったのは、私に壊れたイメージを示すことです。ここにコードがあります。

このような何かが動作するはずjavascriptの

function ajaxFileUpload(upload_field) 
{ 
// Checking file type 
var re_text = /\.jpg|\.gif|\.jpeg|\.png|\.gif/i; 
var filename = upload_field.value; 
if (filename.search(re_text) == -1) { 
alert("File should be either jpg or gif or jpeg or png"); 
upload_field.form.reset(); 
return false; 
} 
document.getElementById('picture_preview').innerHTML = '<img src="" width="10%" border="0" />'; 
upload_field.form.action = 'upload-picture.php'; 
upload_field.form.target = 'upload_iframe'; 
upload_field.form.submit(); 
upload_field.form.action = ''; 
upload_field.form.target = ''; 
return true; 
} 

HTML

<!-- iframe used for ajax file upload--> 
<!-- debug: change it to style="display:block" --> 
<iframe name="upload_iframe" id="upload_iframe" style="display:none;"></iframe> 
<!-- iframe used for ajax file upload--> 

<form name="pictureForm" method="post" autocomplete="off" enctype="multipart/form-data"> 
<div> 
<span>Upload Picture :</span> 
<input type="file" name="picture" onclick="preview()" id="picture" onchange="return ajaxFileUpload(this);" /> 
<span id="picture_error"></span> 
<div id="picture_preview"></div> 
</div> 
</form> 

Answer 1

：

Javascriptを

var input = document.getElementById('image_uploader'); 
var uploadedImage = document.getElementById('uploaded_image'); 

input.addEventListener('change', onImageInput); 

function onImageInput() 
{ 
    var imageFile = input.files[0]; 
    var reader = new FileReader(); 
    reader.addEventListener('loadend', onReaderComplete); 
    reader.readAsDataURL(imageFile); 
} 

function onReaderComplete(e) 
{ 
    uploadedImage.src = e.target.result; 
} 

HTML

<input type="file" id="image_uploader"/> 
<div id="picture_preview"><img id="uploaded_image"/></div> 

この後、AJAXなどの画像データ（src）をサーバーに送信できます。