我想知道是否有一种方法可以动态显示用户刚刚上传到输入 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>
上传.js
$(document).ready(function() {
$("#id_image").change(file_select);
});
function file_select(event) {
$("#uploaded_image").attr("src", $("#id_image").val());
}
所以我基本上想显示用户刚刚上传到字段上的图像。
当然,我知道如果用户已经提交了表单,并且图像已经在我的数据库服务器中,我可以轻松查看图像。
但是,我想在图像提交到数据库服务器之前预览图像。
为了做到这一点,我想我必须在上传者自己的计算机中找出图像的路径,然后将“本地路径”设置为图像的“src”。
有没有办法获取用户刚刚提交的图像的本地路径?
(我上面的 Javascript 代码显然不起作用,因为它只是将图像文件的名称,而不是绝对路径设置为“src”。例如,当我运行该代码并上传图像时,我得到了这个:
结果:
<img id="uploaded_image" src="random_image.jpg" />
这没有显示任何内容。