如何添加、删除HTML结点 & 上传图片预览

html-css013

如何添加、删除HTML结点 & 上传图片预览,第1张

用到Jquery插件

<div class="aa"></div>

<div class="bb"></div>

添加节点： $(".aa").append(".bb") 节点aa后面添加bb节点

删除节点： $(".bb").remove() 删除最后一个节点$(".bb:last").remove()

上传图片预览:

$("#flie").change(function(){ //上传 控件 上传的 预览

$("#img1").attr("src","file:///"+$("#flie").val())

})

<input id="flie" name="flie" type="file" /><br>

<img id="img1" width="500" height="200" src="">

给你个示例代码：

<%@ page contentType="text/htmlcharset=GBK"%>

<html>

<head>

<title>Login</title>

</head>

<body>

<form action="login_check.jsp" method="post">

<B>----欢迎来到XXXXXX页面----</B><br>

<pre>

用户名：<input type="text" value="" name="userName"><br>

密码 ：<input type="password" value="" name="pwd"><br>

<input type="submit" value="登入">

<input type="reset" value="取消">

</pre>

<img src=file:///D:/004.JPEG>

</form>

</body>

</html>

把工作文件放在你的web文件夹里（和html文件一个目录）

用img或者imput都可以

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<input type="image" src="./工作文件/IMG_3661.jpeg" style="width: 100pxheight: 100px"/>

<img src="./工作文件/IMG_3661.jpeg" style="width: 100pxheight: 100px"/>>

</body>

</html>