<!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>
设置图片的大小,因此可以通过改变参数,改变预览图片的大小