使用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> 

之後，您可以發送圖像數據（src）到服務器與AJAX或其他類似的東西。