javascript 简单实现图片上传预览功能

发布时间：2018-09-08 09:34:06 所属栏目：Asp教程来源：站长网

导读：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>
提示：可修改后代码再运行!

（编辑：辽源站长网）

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