HTML-选择文件名后显示图像

我有一张表格

<input type="file" name="filename" accept="image/gif, image/jpeg, image/png">

浏览和选择文件。

我想要做的是在图像被选中后立即显示该图像。 这是在按下表单上的“提交”按钮之前，因此几乎可以肯定图像位于客户端。这能做到吗？

615128 次浏览
小开

您可以通过以下代码实现这一点:

$("input").change(function(e) {


for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {


var file = e.originalEvent.srcElement.files[i];


var img = document.createElement("img");
var reader = new FileReader();
reader.onloadend = function() {
img.src = reader.result;
}
reader.readAsDataURL(file);
$("input").after(img);
}
});

演示: Http://jsfiddle.net/ugpdx/

小开

这可以使用 HTML5完成，但只能在支持它的浏览器中工作。

请记住，对于不支持这一点的浏览器，您需要一种替代方法。我在 这个插件方面已经取得了很大的成功，这使得很多工作脱离了你的手。

小开
最佳答案

给你:

超文本标示语言

<!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]);
}
}

现场演示


提交答案