JavaScript详解（9.文件上传案例）

最新推荐文章于 2023-10-06 18:03:41 发布

张兵游勇

最新推荐文章于 2023-10-06 18:03:41 发布

阅读量8.7k

点赞数

分类专栏： JavaScript 笔记文章标签： javascript css html html5 css3

本文链接：https://blog.csdn.net/qq_43623447/article/details/104053097

版权

笔记同时被 2 个专栏收录

27 篇文章 5 订阅

订阅专栏

JavaScript

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
2.<html>
3.
4.	<head>
5.		<meta charset="UTF-8">
6.		<title>上传文件</title>
7.		<script type="text/javascript" >
8.			function addQQFile() {
9.				var showQQDiv = document.getElementById("showQQDiv");
10.				showQQDiv.innerHTML += '<div><input type="file" name="photo" /> 
11.       &nbsp; <input type="button" value="删除" onclick="delQQFile(this)" /></div>';
12.			}
13.			function delQQFile(btn){
14.				btn.parentNode.parentNode.removeChild(btn.parentNode);
15.			}
16.			
17.			
18.			function addSinaFile(){
19.				var showSinaDiv=document.getElementById("showSinaDiv");
20.				//创建一个DIV节点
21.				var div=document.createElement("div");
22.				//创建一个表单位file
23.				var file=document.createElement("input");
24.				file.type="file";
25.				file.name="photo";
26.				//创建一个br
27.				var br=document.createElement("br");
28.				//创建一个button
29.				var btn=document.createElement("input");
30.				btn.type="button";
31.				btn.value="删除";
32.				btn.onclick=function(){
33.					showSinaDiv.removeChild(div);
34.				}
35.				//把创建一三个对象放到syhowSidv里面
36.				div.appendChild(file);
37.				div.appendChild(btn);
38.				div.appendChild(br);
39.				showSinaDiv.appendChild(div);
40.			}
41.		</script>
42.
43.
44.	</head>
45.
46.	<body>
47.		<h1>QQ空间上传图片</h1>
48.
49.		<input type="button" value="添加一行" onclick="addQQFile();" />
50.		<hr />
51.		<div id="showQQDiv">
52.		</div>
53.		<h1>新浪空间上传图片</h1>
54.
55.		<input type="button" value="添加一行" onclick="addSinaFile();" />
56.		<hr />
57.		<div id="showSinaDiv">
58.		</div>
59.	</body>
60.
61.</html>

张兵游勇

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript详解（9.文件上传案例）

<!DOCTYPE html>2.<html>3.4. <head>5. <meta charset="UTF-8">6. <title>上传文件</title>7. <script type="text/javascript" >8. function addQQFile() {9. ...
复制链接

扫一扫

专栏目录