1：
<!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> <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/" onsubmit="return checkimg( this );" > <input name="imgfile" type="file" id="imgfile" size="40" onchange="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" onchange="CheckImgCss(this, 'img');"/> <div id="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='图片路径',sizingMethod=scale);102px;height:100px;"> </html>
2：
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>带有图片预览功能的上传表单webjx.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" onchange="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>
网上 找到的留作 资料 后期仔细研究