我有一个表格可以让我
<input type="file" name="filename" accept="image/gif, image/jpeg, image/png">
浏览并选择文件。
我想要做的是在选择图像后立即显示该图像。这是在表单上的“提交”按钮被按下之前,所以图像几乎肯定位于客户端。这可以做到吗?
干得好:
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]); } }
现场演示