首页 > 网络编程 > JavaScript > javascript技巧 > 添加、删除HTML结点 & 上传图片预览 2006-10-24 00:00:00 作者： 添加、删除HTML结点 & 上传图片预览 1.添加、删除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" lang="gb2312"> <head> <title> 添加、删除HTML结点 & 上传图片预览 </title> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <meta name="author" content="枫岩,http://www.cnlei.com"> <meta name="keywords" content="" /> <meta name="description" content="" /> <script type="text/javascript"> <!-- function AddChild(sPid){ var oTextNode = document.getElementById("TplNode").getElementsByTagName("li")[0]; var oClone = oTextNode.cloneNode(oTextNode); var p=document.getElementById(sPid); p.appendChild(oClone); } function DelChild(o,sPid){ var oTextNode = o.parentNode; var p=document.getElementById(sPid); p.removeChild(oTextNode); } function PreviewImg(o,sPid){ document.getElementById(sPid).src=o.value; } --> </script> </head> <body> <ul id="TplNode" style="display:none;"> <li><input type="file" name="" value="" size="64" onchange="PreviewImg(this,'PrevImg');" /> <a href="javascript:;" onclick="DelChild(this,'UpFiles');">删除</a></li> </ul> <ul id="UpFiles"> <li><input type="file" name="" value="" size="64" onchange="PreviewImg(this,'PrevImg');" /> <a href="javascript:;" onclick="DelChild(this,'UpFiles');">删除</a></li> </ul> <p><a href="javascript:;" onclick="AddChild('UpFiles');">增加附件</a></p> <p>图片预览：<br><img id="PrevImg" src="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif" alt="" /></p> </body> </html> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 您可能感兴趣的文章:使用HTML+CSS+JS制作简单的网页菜单界面js+html5实现可在手机上玩的拼图游戏js+HTML5基于过滤器从摄像头中捕获视频的方法js+HTML5实现视频截图的方法js+html5绘制图片到canvas的方法JS上传图片前实现图片预览效果的方法js实现局部页面打印预览原理及示例代码js 本地预览的简单实现方法JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
