纳金网

标题: javascript 简单实现图片上传预览功能 [打印本页]

作者: 奇 时间: 2011-12-30 19:34
标题: javascript 简单实现图片上传预览功能
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=***e;

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

rawImage(this);" >

</BODY>

</HTML><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>

文章源自：烈火网，原文：http://www.veryhuo.com/a/view/24805.html

作者: 奇 时间: 2012-1-6 20:02

作者: 奇 时间: 2012-1-20 23:25
秋天的落叶已飘远，冬日的暖阳已降临，春天的故事在萌芽，夏日的清凉在期待。新年的钟声提前为你敲响，HAPPYNEWYEAR！

作者: C.R.CAN 时间: 2012-3-11 23:30
好`我顶``顶顶

作者: C.R.CAN 时间: 2012-3-23 23:18
提醒猪猪，千万不能让你看见

作者: C.R.CAN 时间: 2012-3-31 23:25
我也来支持下

作者: 晃晃 时间: 2012-4-9 23:25
加精、加亮滴铁子，尤其要多丁页丁页

作者: 奇 时间: 2012-4-12 23:26
頂。。。

作者: 晃晃 时间: 2012-4-18 23:18
赞一个，哈哈

作者: 奇 时间: 2012-4-28 23:26
很经典，很实用，学习了!

作者: C.R.CAN 时间: 2012-5-25 23:21
很经典，很实用，学习了!

作者: tc 时间: 2012-9-22 23:29
真不错,全存下来了.

作者: 菜刀吻电线 时间: 2013-2-2 23:24
加精、加亮滴铁子，尤其要多丁页丁页

作者: 奇 时间: 2013-2-11 23:22
真不错,全存下来了.

作者: C.R.CAN 时间: 2013-2-24 23:28
发了那么多，我都不知道该用哪个给你回帖了，呵呵

作者: C.R.CAN 时间: 2013-3-12 23:20
我就看看，我不说话

欢迎光临纳金网 (http://go.narkii.com/club/)