HTML - 选择文件名后显示图像 [英] HTML - Display image after selecting filename
问题描述
<强>可能重复：结果，
在上传之前预览图片
我有一个表格，允许我
< input type =filename =filenameaccept =image / gif，image / jpeg，image / png>
浏览并选择一个文件。
我想要做的是在图像被选中后立即显示图像。
这是在窗体上的提交按钮被按下之前，所以图像几乎肯定驻留在客户端。可以这样做吗？
strong>
<！DOCTYPE html>
< html>
< head>
< link class =jsbinhref =http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css =stylesheettype = text / css/>
< script class =jsbinsrc =http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js>< / script>
< script class =jsbinsrc =http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js>< / script>
< meta charset = utf-8 />
< title> JS Bin< / title>
<！ - [if IE]>
< script src =http://html5shiv.googlecode.com/svn/trunk/html5.js>< / script>
<！[endif] - >
< style>
文章，旁边，数字，页脚，标题，hgroup，
菜单，nav，部分{display：block; }
< / style>
< / head>
< body>
< input type ='file'onchange =readURL（this）; />
< img id =blahsrc =＃alt =您的图片/>
< / body>
< / html>
脚本：
（$ input，$ input，$ file，$ file，$ file，$ name） ;
reader.onload = function（e）{
$（'＃blah'）
.attr（'src'，e.target.result）
。 width（150）
.height（200）;
};
reader.readAsDataURL（input.files [0]）;
}
}
Possible Duplicate:
Preview an image before it is uploaded
I have a form that allows me with
<input type="file" name="filename" accept="image/gif, image/jpeg, image/png">
to browse and select a file.
What I want to do is display that image immediately after the image has been selected. And this is before the "submit" button on the form has been pressed so the image almost certainly resides Client side. Can this be done?
Here You Go:
HTML
<!DOCTYPE html>
<html>
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</body>
</html>
Script:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
这篇关于HTML - 选择文件名后显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
