Jquery:如何使用 Field的“value”动态显示图像

我想知道是否有一种方法可以动态显示用户刚刚上传到input type =“file”字段的图像。

例如,到目前为止,我有以下代码:

image_upload.html

upload.js

 $(document).ready(function() { $("#id_image").change(file_select); }); function file_select(event) { $("#uploaded_image").attr("src", $("#id_image").val()); } 

所以我基本上想要显示用户刚刚在Field上传的图像。

当然,我知道如果用户已经提交了表单,并且图像已经在我的数据库服务器中,我可以轻松地查看图像。

但是,我想在将图像提交到数据库服务器之前预览图像。

为了做到这一点,我想我必须在Uploader自己的计算机中找出Image的PATH,然后将“Local path”设置为图像的“src”。

有没有办法获取用户刚提交的图像的本地路径?

(我的上面的Javascript代码显然不起作用,因为它只是设置图像文件的名称,而不是绝对路径,作为“src”。例如,当我运行该代码并上传图像时,我得到:

结果:

  

哪个没有显示任何内容。

看看这个示例,这应该有用 : http : //jsfiddle.net/LvsYc/

HTML:

 
your image

JS:

 function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('https://stackoverflow.com/questions/18308876/jquery-how-to-dynamically-show-image-using-the-value-of-input-type-file-f/#blah').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("https://stackoverflow.com/questions/18308876/jquery-how-to-dynamically-show-image-using-the-value-of-input-type-file-f/#imgInp").change(function(){ readURL(this); }); 

使用此代码。 它会工作: