uploadfile和Image实现图片预览

最新推荐文章于 2024-02-02 15:46:31 发布

weixin_30768175

最新推荐文章于 2024-02-02 15:46:31 发布

阅读量170

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/50614090/archive/2011/04/17/2019160.html

版权

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" οnchange="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>