HTML图片预览实现

最新推荐文章于 2024-07-29 15:03:08 发布

fastercom

最新推荐文章于 2024-07-29 15:03:08 发布

阅读量579

点赞数

分类专栏： HTML 文章标签： html 图片预览

本文链接：https://blog.csdn.net/fastercom/article/details/26851587

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<script src="jQuery1.9.1.js"type="text/javascript"></script>
	</head>
	<body>
	<input type="file" name="pic"id="pic" onchange='javascript:previewImage(this);' />
	<div id='box'>
	<img id="img_show" width="150px"height="150px" src="image.jpg" /></div>
	</body>
	</html>
	<script type="text/javascript">
	function previewImage(file) {
	if (!/\.(gif\|jpg\|jpeg\|png\|bmp\|GIF\|JPG\|PNG\|BMP)$/.test(file.value)) {
	alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种。");
	ths.value = "";
	return;
	}
	var img_show = document.getElementById('img_show');
	if (window.navigator.userAgent.indexOf("MSIE") > 0) {
	var path = file.value;
	var img = new Image(); //动态创建img
	img.src = path;
	img.style.display = "none";
	if (img.readyState == "complete") {//已经load完毕，直接打印文件大小
	if (img.fileSize > 1024 * 300)//ie获取文件大小
	{
	alert("图片的大小不能超过300K。");
	} else {
	img_show.src = path;
	}
	}
	img.onreadystatechange = function () {
	if (img.readyState == 'complete') {//当图片load完毕
	if (img.fileSize > 1024 * 300)//ie获取文件大小
	{
	alert("图片的大小不能超过300K。");
	} else {
	img_show.src = path;
	}
	}
	}
	return;
	}
	if (file.files[0].size > 1024 * 300) {
	alert("图片的大小不能超过300K。");
	return;
	}
	if (file.files && file.files[0]) {
	var reader = new FileReader();
	reader.onload = function (evt) {
	img_show.src = evt.target.result;
	}
	reader.readAsDataURL(file.files[0]);
	}
	else {
	file.select();
	img_show.src = document.selection.createRange().text;
	}
	}
	</script>

注：

<img id="img_show" width="150px" height="150px" src="image.jpg" /></div>

设置图片的大小，因此可以通过改变参数，改变预览图片的大小

fastercom

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML图片预览实现

xmlns="http://www.w3.org/1999/xhtml"> http-equiv="Content-Type" content="text/html; charset=utf-8" /> src="jQuery1.9.1.js"type="text/javascript">
复制链接

扫一扫

专栏目录