HTML – select文件名后显示图像
可能重复：
在上传之前预览图像
我有一个允许我的forms
<input type="file" name="filename" accept="image/gif, image/jpeg, image/png"> 浏览并select一个文件。
我想要做的是在图像被选中后立即显示图像。 这是在表单上的“提交”button被按下之前，所以图像几乎肯定驻留在客户端。 可以这样做吗？
干得好：
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]); } }
现场演示
你可以用下面的代码实现这个function：
$("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完成，但只能在支持它的浏览器中使用。 这是一个例子 。
请记住，对于不支持此操作的浏览器，您需要另一种方法。 我用这个插件获得了很多成功， 这个插件需要很多工作。
