HTML - 选择文件名后显示图像 [英] HTML - Display image after selecting filename
本文介绍了HTML - 选择文件名后显示图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个表单，允许我使用
I have a form that allows me with
<input type="file" name="filename" accept="image/gif, image/jpeg, image/png">
浏览和选择文件.
我想要做的是在选择图像后立即显示该图像.这是在按下表单上的提交"按钮之前，因此图像几乎可以肯定位于客户端.这能做到吗?
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?
推荐答案
给你:
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>
脚本:
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屋！
查看全文
