javascript 简质朴现图片上传预览成果

发布时间：2018-09-01 14:20:17 所属栏目：编程来源：站长网

导读：javascript 简质朴现图片上传预览成果的代码，没有效到 jQuery ，各有各的特点吧，假如你的网站之前就用有jQuery话，为了利便起见，最好借助jQuery插件完本钱成果。要么你就用此刻这个纯 Java Script版本的，很适用的成果。看一下演示结果： HTMLHEADTITL

　　javascript 简质朴现图片上传预览成果的代码，没有效到jQuery，各有各的特点吧，假如你的网站之前就用有jQuery话，为了利便起见，最好借助jQuery插件完本钱成果。要么你就用此刻这个纯JavaScript版本的，很适用的成果。

　　看一下演示结果：

<HTML> <HEAD> <TITLE>JS上传预览的图片</TITLE> </HEAD> <script> function DrawImage(ImgD){ var preW = 300; var preH = 400 ; var image=new Image(); image.src=ImgD.src; if(image.width>0 && image.height>0){ flag=true; if(image.width/image.height>= preW/preH){ if(image.width>preW){ ImgD.width=preW; ImgD.height=(image.height*preW)/image.width; }else{ ImgD.width=image.width; ImgD.height=image.height; } ImgD.alt=image.width+"×"+image.height; } else{ if(image.height>preH){ ImgD.height=preH; ImgD.width=(image.width*preH)/image.height; }else{ ImgD.width=image.width; ImgD.height=image.height; } ImgD.alt=image.width+"×"+image.height; } } } function FileChange(Value){ flag=false; document.getElementById("uploadimage").width=10; document.getElementById("uploadimage").height=10; document.getElementById("uploadimage").alt=""; document.getElementById("uploadimage").src=Value; } </script> <BODY> <input type="file" size="30" name="picaddress" onChange="javascript:FileChange(this.value);"> <br><IMG id=uploadimage height=0 width=0 src="" onload="javascript:DrawImage(this);" > </BODY> </HTML><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MYSQL_框架之主从GTID	MySQL Online DDL的实
MySQL 5.7 mysqldumps	MySQL TEXT、DATE、SE