js实现上传时图片的预览

最新推荐文章于 2024-09-11 23:52:01 发布

epzk

最新推荐文章于 2024-09-11 23:52:01 发布

阅读量511

点赞数

分类专栏： js 文章标签： javascript function image html server xhtml

本文链接：https://blog.csdn.net/epzk/article/details/4518591

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

方法一：

<html >
<head>
<title>
</title>
<script type="text/javascript">
var flag=false;
function DrawImage(ImgD){
   var image=new Image();
   image.src=ImgD.src;
   if(image.width>0 && image.height>0){
    flag=true;
    if(image.width/image.height>= 120/80){
     if(image.width>120){
     ImgD.width=120;
     ImgD.height=(image.height*120)/image.width;
     }else{
     ImgD.width=image.width;
     ImgD.height=image.height;
     }
     ImgD.alt=image.width+"×"+image.height;
     }
    else{
     if(image.height>80){
     ImgD.height=80;
     ImgD.width=(image.width*80)/image.height;
     }else{
     ImgD.width=image.width;
     ImgD.height=image.height;
     }
     ImgD.alt=image.width+"×"+image.height;
     }
    }
   }

function FileChange(Value){
flag=false;
document.all.uploadimage.width=10;
document.all.uploadimage.height=10;
document.all.uploadimage.alt="";
document.all.uploadimage.src=Value;
}
</script>
</head>
<body>
<input style="WIDTH: 143px; HEIGHT: 18px" type="file" size="8" name="pic" οnchange="javascript:FileChange(this.value);"/>
<img id="uploadimage" height="10" width="10" src="" οnlοad="javascript:DrawImage(this);" alt=""/><br/>
</body>
</html>

方法二：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>带有图片预览功能的上传表单－－cnwebshow.com</title>
<script>
function viewmypic(mypic,imgfile) {
if (imgfile.value){
mypic.src=imgfile.value;
mypic.style.display="";
mypic.border=1;
}
}
</script>
</head>
<body>
<center>
<form >
<input name="imgfile" type="file" id="imgfile" size="40" οnchange="viewmypic(showimg,this.form.imgfile);" />
<br />
</form>
<img name="showimg" id="showimg" src="" style="display:none;" alt="预览图片" />
<br />
</div>
<div style="display:none">
</div>
</center>
</body>
</html>

方法三(c#):

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defaults.aspx.cs" Inherits="Defaults" %>

<!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 runat="server">
    <title>无标题页</title>
    <style type="text/css">#newPreview {
     FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
    }
    </style>

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:FileUpload ID="file_image" runat="server" οnchange="PreviewImg(this)" />
<div id="newPreview" style="width:120px;height:168px"></div>
    </div>

    </form>
</body>
</html>