JavaScript案例:上传图片

最新推荐文章于 2024-06-10 22:18:41 发布

「已注销」

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量536

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_67192586/article/details/123750743

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

获取文本节点

<script type="text/javascript">
	function test(){
		// 直接获取
		//通过id获取
		var ele = document.getElementById('username');
		ele.setAttribute("name","uname");
		alert(ele.name);
		 // 通过name获取
		 var fav = document.getElementsByName('fav');
		 var inputs = document.getElementsByTagName('input')
	
		// 间接获取
		// 通过父节点获取子节点
		var parentForm = document.getElementById('form')	//[object HTMLFormElement]
		//alert(parentForm);
		//alert(parentForm.childNodes.length);
		//alert(parentForm.childNodes[2].name)
		
		// 通过字节点获取父节点
		//alert(document.getElementById('pwd').parentNode.id)
		
		// 利用兄弟节点获取兄弟节点:
		//alert(document.getElementById('pwd').nextSibling.value); //nextSibling属性可返回某个元素之后紧跟的节点（处于同一树层级中）。
		
		alert(document.getElementById('username').nextSibling.previousSibling.value);
		
	}
</script>
</head>
	<body>
		<input type="button" value="测试按钮" onclick="test()">
		<form id="form" action="" method=""><input type="text" id="username" name="username"/><input type="password" id="pwd" name="pwd"/>
			<input type="checkbox" name="fav" value="0" />游泳
			<input type="checkbox" name="fav" value="1" />跑步
			<input type="checkbox" name="fav" value="2" />骑行
			<input type="submit" value="提交按钮" />
		</form>
	</body>
</html>

案例上传图片

方式一

<script type="text/javascript">
	function uploading(){
		// 获取div
		var mydiv = document.getElementById('mydiv');
		mydiv.innerHTML+='<div><input type="file"/><input type="button" value="删除" onclick="del(this)" /></div>'
	}
	
	function del(obj){ //obj:是当前的那个删除按钮
		var div01 = obj.parentNode; // div01:就是按钮上层的父节点: div
		// 获取mydiv
		var mydiv = document.getElementById('mydiv');
		// 将div01从mydiv中移除
		mydiv.removeChild(div01);
	}
</script>
</head>
	<body>
		<h1>上传图片</h1>
		<input type="button" value="上传" onclick="uploading()"/>
		<div id="mydiv"></div>
	</body>
</html>

方式二

<script type="text/javascript">
	function uploading(){
		// 创建三个节点:
		// 创建文件节点
		var fileNode = document.createElement('input');
		fileNode.type="file";
		
		// 创建按钮节点
		var btnNode = document.createElement('input');
		btnNode.type="button";
		btnNode.value="删除";
		btnNode.onclick=function(){
			mydiv.removeChild(fileNode);
			mydiv.removeChild(btnNode);
			mydiv.removeChild(brNode);
		}
		// 创建换行节点
		var brNode = document.createElement('br');
		// 获取mydiv
		var mydiv = document.getElementById('mydiv');
		// 将上面创建的三个节点放入mydiv中
		mydiv.appendChild(fileNode)
		mydiv.appendChild(btnNode)
		mydiv.appendChild(brNode)
	}
</script>