两种方式实现
- URL
- FileReader
Index.jsp文件
<%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> <link rel="stylesheet" type="text/css" href="css/common.css" /> <script type="text/javascript" src="js/jquery-1.11.1.js" ></script> <script type="text/javascript"> //方式1：URL方式实现 function preview1(file) { var img = new Image(), url = img.src = URL.createObjectURL(file); var $img = $(img); img.onload = function() { URL.revokeObjectURL(url); $('#previewImg').empty().append($img); }; } //方式2：FileReader方式实现 function preview2(file) { var reader = new FileReader(); reader.onload = function(e) { var $img = $('<img>').attr("src", e.target.result); $('#previewImg').empty().append($img); }; reader.readAsDataURL(file); } $(function() { //jquery实现图片点击显示 $(".thumbs a").click(function() { var largePath = $(this).attr("href"); var largeAlt = $(this).attr("title"); $("#largeImg").attr({ src: largePath, alt: largeAlt }); return false; }); //实现图片预览功能：preview1使用URL方式实现;preview2使用FileReader方式实现 $('[type=file]').change(function(e) { var file = e.target.files[0]; preview2(file); }); }); </script> </head> <body> <form action=""> 请选择图片：<input id="myfile" name="myfile" type="file" /> <div id="previewImg"></div> </form> <hr> <h1>图片预览</h1> <p><img id="largeImg" src="images/img1-lg.jpg" alt="Large Image" /></p> <p class="thumbs"> <a href="images/img2-lg.jpg" title="image2"><img src="images/img2-thumb.jpg"></a> <a href="images/img3-lg.jpg" title="image3"><img src="images/img3-thumb.jpg"></a> <a href="images/img4-lg.jpg" title="image4"><img src="images/img4-thumb.jpg"></a> <a href="images/img5-lg.jpg" title="image5"><img src="images/img5-thumb.jpg"></a> <a href="images/img6-lg.jpg" title="image6"><img src="images/img6-thumb.jpg"></a> </p> </body> </html>
common.css文件
body { margin: 20px auto; padding: 0; width: 580px; font: 75%/120% Arial, Helvetica, sans-serif; text-align:center; } h2 { font: bold 190%/100% Arial, Helvetica, sans-serif; margin: 0 0 .2em; } h2 em { font: normal 80%/100% Arial, Helvetica, sans-serif; color: #999999; } #largeImg { border: solid 1px #ccc; width: 550px; height: 400px; padding: 5px; } .thumbs img { border: solid 1px #ccc; width: 100px; height: 100px; padding: 4px; } .thumbs img:hover { border-color: #FF9900; } #large{ position:absolute; z-index:999; }
URL.revokeObjectURL方法Opera不支持，FileReader除IE9及以下不支持，其它浏览器都支持。