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完成,但只能在支持它的浏览器中使用。 这是一个例子 。

请记住,对于不支持此操作的浏览器,您需要另一种方法。 我用这个插件获得了很多成功, 这个插件需要很多工作。