我想知道是否有办法动态显示用户刚刚上传到输入type =“file”字段的图像.
例如,到目前为止,我有以下代码：
image_upload.html
<form id ="image_upload_form" action="" method="post" enctype="multipart/form-data">
<input id ="id_iamge" type="file" name="image" />
<input type="submit" value="Upload" />
</form>
<div id="image_view">
<img id="uploaded_image">
</div>
upload.js
$(document).ready(function() {
$("#id_image").change(file_select);
});
function file_select(event) {
$("#uploaded_image").attr("src",$("#id_image").val());
}
当然,我知道如果用户已经提交了表单,当图像已经在我的数据库服务器内时,我可以很容易地查看图像.
但是,我想在图像提交到数据库服务器之前预览图像.
为了做到这一点,我想我必须在上传者自己的电脑中找到图像的PATH,然后将“本地路径”设置为图像的“src”.
(我的上面的Javascript代码显然没有起作用,因为它只是设置图像文件的NAME,而不是绝对路径,作为“src”,例如,当我运行该代码并上传图像时,我得到：
结果：
<img id="uploaded_image" src="random_image.jpg" />
这不显示任何东西.
解决方法
看看这个样本,这应该是工作：
http://jsfiddle.net/LvsYc/
HTML：
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
JS：
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src',e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
