带图片预览功能的图片上传代码

最新推荐文章于 2023-08-08 15:51:30 发布

xingmyworld

最新推荐文章于 2023-08-08 15:51:30 发布

阅读量3.4k

点赞数 1

分类专栏： js 文章标签： function javascript file filter action image

本文链接：https://blog.csdn.net/xingmyworld/article/details/8032875

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

第一种方法：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>带图片预览功能的图片上传代码</title>
<script>
function viewmypic(mypic,imgfile) {
if (imgfile.value){
mypic.src=imgfile.value;
mypic.style.display="";
mypic.border=1;
}
}
</script>
</head>

<body>
<center>
<form name="upmyimg" method="post" enctype="multipart/form-data" action="getyourpic/" οnsubmit="return checkimg( this );" >
<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>


第二种方法：
    <script language="javascript" type = "text/javascript">
        function $(o) { return document.getElementById(o); }
        function CheckImgCss(o, img) {
            if (!/\.((jpg)|(bmp)|(gif)|(png))$/ig.test(o.value)) {
                alert('只能上传jpg,bmp,gif,png格式图片!');
                o.outerHTML = o.outerHTML;
            }
            else {
                $(img).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = o.value;
                //$('Image1').src = o.value;//这里IE7已经不支持了。所以才有上面的方法。
            }
        }
</script>
<input type="file" size="50" name="File" οnchange="CheckImgCss(this, 'img');"/>
<div id="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='图片路径',sizingMethod=scale);width:102px;height:100px;">


用第二种方法，第一种Ie7可能不支持

xingmyworld

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
带图片预览功能的图片上传代码

第一种方法：带图片预览功能的图片上传代码function viewmypic(mypic,imgfile) {if (imgfile.value){mypic.src=imgfile.value;mypic.style.display="";mypic.border=1;}}
复制链接

扫一扫