Jquery：如何使用 <input type="file"> 字段的“值”动态显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18308876/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery: How to dynamically SHOW image using the "value" of <input type="file"> Field
提问by user2492270
I was wondering whether there is a way to dynamically display an image that a user just uploaded to the input type="file" field.
我想知道是否有一种方法可以动态显示用户刚刚上传到 input type="file" 字段的图像。
For example, so far I have the following code:
例如，到目前为止我有以下代码：
image_upload.html
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
上传.js
$(document).ready(function() {
$("#id_image").change(file_select);
});
function file_select(event) {
$("#uploaded_image").attr("src", $("#id_image").val());
}
So I basically want to show the image that the user just uploaded on the Field.
所以我基本上想展示用户刚刚上传到 Field 上的图片。
Of course, I know I can easily view the image if the user already SUBMITTED the form, and when the image is already inside my Database server.
当然，我知道如果用户已经提交了表单，并且图像已经在我的数据库服务器中，我可以轻松查看图像。
However, I want to preview the image BEFORE the image is submitted into the database server.
但是，我想在将图像提交到数据库服务器之前预览图像。
In order to do this, I guess I have to find out the PATH of the Image in the Uploader's own computer and then set that "Local path" as the "src" of the image.
为了做到这一点，我想我必须在上传者自己的计算机中找出图像的路径，然后将该“本地路径”设置为图像的“源”。
Is there a way to fetch this LOCAL PATH of the image that the user just submitted?
有没有办法获取用户刚刚提交的图像的本地路径？
(My Javascript code above obviously didn't work, since it just sets the NAME of the image file, not the absolute Path, as the "src". For example, when I run that code and upload an image, I get this:
（我上面的Javascript代码显然不起作用，因为它只是将图像文件的名称而不是绝对路径设置为“src”。例如，当我运行该代码并上传图像时，我得到了这个：
The Result:
结果：
<img id="uploaded_image" src="random_image.jpg" />
which doesn't show anything.
这没有显示任何内容。
回答by Alex
Take a look at this sample, this should work: http://jsfiddle.net/LvsYc/
看看这个示例，这应该可以工作：http: //jsfiddle.net/LvsYc/
HTML:
HTML：
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
JS:
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);
});
回答by NITIN RATHOUR
Use this code. It will work:
使用此代码。它会起作用：
<!-- Java script code, use jquery library. -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
function showimagepreview(input)
{
if (input.files && input.files[0])
{
var filerdr = new FileReader();
filerdr.onload = function(e) {
$('#imgDisplayarea').attr('src', e.target.result);
};
filerdr.readAsDataURL(input.files[0]);
}
}
</script>
<!-- HTML -->
<form>
<div>
<input type="file" name="imgShow" id="imgShow" onchange="imagePreview(this)" />
</div>
<img id="imgDisplayarea"/>
</form>
