uploadfile和Image实现图片预览
this.FileUpload1.Attributes.Add("onchange", "document.getElementById('" + this.Image1.ClientID + "').src=document.getElementById('" + this.FileUpload1.ClientID + "').value");
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<script type="text/javascript" src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js"></script>
<script language="javascript">
$(function(){
var ei = $("#large");
ei.hide();
$("#img1, img").mousemove(function(e){
ei.css({top:e.pageY,left:e.pageX}).html('<img style="border:1px solid gray;" src="' + this.src + '" />').show();
}).mouseout( function(){
ei.hide();
})
$("#f1").change(function(){
$("#img1").attr("src","http://www.cnblogs.com/Pynix/admin/file:///"+$("#f1").val());
})
});
</script>
<style type="text/css">
#large{position:absolute;display:none;z-index:999;}
</style>
</head>
<body>
上传预览图片:<br>
<input id="f1" name="f1" type="file" /><br>
<img id="img1" width="120" height="60" src="http://www.cssrain.cn/skins/tim/logo-jq.gif">
<div id="large"></div>
<br><br><br><br><br><br>
鼠标滑过预览图片:<br>
<img width="120" height="60" src="http://www.cssrain.cn/skins/tim/logo-jq.gif"><br>
<img width="120" height="60" src="http://www.cssrain.cn/demo/JQuery+API/logo-json.gif"><br>
</body>
</html>
function getFullPath(obj) { //得到图片的完整路径
if (obj) {
//ie
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
obj.select();
return document.selection.createRange().text;
}
//firefox
else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
if (obj.files) {
return obj.files.item(0).getAsDataURL();
}
return obj.value;
}
return obj.value;
}
$("#FileUpload1").change(function () {
var strSrc = this.value;
img = new Image();
img.src = getFullPath(this);
//验证上传文件格式是否正确
var pos = strSrc.lastIndexOf(".");
var lastname = strSrc.substring(pos, strSrc.length)
if (lastname.toLowerCase() != ".jpg") {
alert("您上传的文件类型为" + lastname + "，图片必须为 JPG 类型");
return false;
}
//验证上传文件宽高比例
if (img.height / img.width > 1.5 || img.height / img.width < 1.25) {
alert("您上传的图片比例超出范围，宽高比应介于1.25-1.5");
return;
}
//验证上传文件是否超出了大小
if (img.fileSize / 1024 > 150) {
alert("您上传的文件大小超出了150K限制！");
return false;
}
$("#Image1").attr("src", getFullPath(this));
})
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>带有图片预览功能的上传表单</title>
<script>
function viewmypic(imgfile) {
if (imgfile.value){
document.getElementById("showimg").src=imgfile.value;
}
}
</script>
</head>
<body>
<center>
<form >
<input name="imgfile" type="file" id="imgfile" size="40" onchange="viewmypic(this.form.imgfile);" />
<br />
</form>
<img name="showimg" id="showimg" src="My Pictures/1.png" alt="预览图片" />
<br />
</div>
<div style="display:none">
</div>
</center>
</body>
</html>
