标签：html5 javascript 图片预览
在上传图片时，经常需要预览图片。
本用例使用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>
标签：html5 javascript 图片预览
原文地址：http://blog.csdn.net/ch717828/article/details/46607153
