javascript - 使用 php 和 javascript 创建带有预览功能的图像 uploader

Question

我的代码似乎无法从桌面提取图像进行预览。我不知道是什么。它所做的只是向我展示了一幅 splinter 的图像。这是代码。

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) 发送到服务器。