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

叁歲伎倆 2023-07-01 08:48 10阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70]

<!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.   <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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200120160821746.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjIzNDQ3,size_16,color_FFFFFF,t_70