html5+js实现图片预览

来源：互联网发布：阿里云code 使用教程编辑：程序博客网时间：2024/05/22 14:07

在上传图片时，经常需要预览图片。

本用例使用html5+js实现上传图片的本地预览。鼠标移至预览图片可以显示大图。

代码：

<html>  <head>        <title>My JSP '01.jsp' starting 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">$(function(){var la = $("#large");la.hide();/*鼠标移至预览图显示大图*/$("#previewImg").mousemove(function(e){la.css({top : e.pageY,left : e.pageX}).html('<img src = "' + this.src + '" />').show();}).mouseout(function(){la.hide();});});/*使用js实现文件上传图片的预览*/function showPreview(obj){var pic = document.getElementById("previewImg");var file = document.getElementById("myfile");html5Reader(file,pic);}/*firefox3.6+ chrome6+ Safari5.2+ Opera11+及IE10浏览器支持FileReader对象其他兼容方法 http://www.2cto.com/kf/201402/281430.html*/function html5Reader(file,pic){var file = file.files[0];        var reader = new FileReader();         reader.readAsDataURL(file);            reader.onload = function(e){            pic.src=this.result;     }     }</script>  </head>    <body>      <img id="previewImg" src="images/preview.jpg" width="80" height="80" />        <form action="uploadServlet.do" method="post" enctype="multipart/form-data">  请选择图片：<input id="myfile" name="myfile" type="file" onchange="showPreview(this)"/>  </form>    <div id="large"></div>   </body></html>

代码：http://download.csdn.net/detail/ch717828/8831425

0 0