Web/admin/ImagePreview/ImagePreview.htm

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片预览效果</title>
<script src="CJL.0.1.min.js"></script>
<script src="QuickUpload.js"></script>
<script src="ImagePreview.js"></script>
</head>
<body>
<style>
.perview {width:600px;background:#fff;font-size:12px; border-collapse:collapse;}
.perview td, .perview th {padding:5px;border:1px solid #ccc;}
.perview th {background-color:#f0f0f0; height:20px;}
.perview a:link, .perview a:visited, .perview a:hover, .perview a:active {color:#00F;}
.perview table{ width:100%;border-collapse:collapse;}
</style>
<table border="0" class="perview">
	<tr>
			<th>选择文件</th>
			<th width="50%">预览图</th>
		</tr>
		<tr>
			<td height="200"><input id="idFile" name="pic" type="file" /></td>
			<td align="center"><img id="idImg" /></td>
		</tr>
	</tbody>
</table>
<script>

var ip = new ImagePreview( $$("idFile"), $$("idImg"), {
	maxWidth: 200, maxHeight: 200, action: "ImagePreview.ashx"
});
ip.img.src = ImagePreview.TRANSPARENT;
ip.file.onchange = function(){ ip.preview(); };

</script>
<br />
<style>
/*file样式*/
#idPicFile {
	width:80px;height:20px;overflow:hidden;position:relative;
	background:url(http://www.cnblogs.com/images/cnblogs_com/cloudgamer/169629/o_addfile.jpg) center no-repeat;
}
#idPicFile input {
	font-size:20px;cursor:pointer;
	position:absolute;right:0;bottom:0;
	filter:alpha(opacity=0);opacity:0;
	outline:none;hide-focus:expression(this.hideFocus=true);
}
</style>
<table class="perview">
	<tr>
		<th align="right"> 选择图片： </th>
		<td width="75%"> <div id="idPicFile"> </div> </td>
	</tr>
	<tr>
		<td colspan="2"><table>
				<thead>
					<tr>