您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
js及jquery实现动态的文件上传操作按钮的添加和删除
作者：佚名 责任编辑：admin 更新时间：2022-06-22
本文为大家介绍下使用js及jquery实现动态的文件上传操作按钮的添加和删除，具体示例如下，希望对大家有所帮助
javascript实现 代码如下: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery文件上传</title> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> var addMore = function() { var div = document.getElementById("div2"); var br = document.createElement("br"); var input = document.createElement("input"); var button = document.createElement("input"); input.setAttribute("type", "file"); button.setAttribute("type", "button"); button.setAttribute("value", "Remove"); button.onclick = function() { div.removeChild(br); div.removeChild(input); div.removeChild(button); } div.appendChild(br); div.appendChild(input); div.appendChild(button); } //节点的移动 //$(function(){ //}); </script> </head> <body> <div id="div1"> <input type="file" id="upload"/> <input type="button" id="btn" value="more" onclick="addMore();"/> </div> <div id="div2"></div> </body> </html> jquery实现 代码如下: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery文件上传</title> <title>jquery1</title> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> /** var addMore = function() { var div = document.getElementById("div2"); var br = document.createElement("br"); var input = document.createElement("input"); var button = document.createElement("input"); input.setAttribute("type", "file"); button.setAttribute("type", "button"); button.setAttribute("value", "Remove"); button.onclick = function() { div.removeChild(br); div.removeChild(input); div.removeChild(button); } div.appendChild(br); div.appendChild(input); div.appendChild(button); }**/ //jquery实现文件上传的按钮添加和删除 $(function(){ $("input[type=button]").click(function(){ var br = $("<br>"); var input = $("<input type='file'/>"); var button = $("<input type='button' value='Remove'/>"); $("#div1").append(br).append(input).append(button); button.click(function() { br.remove(); input.remove(); button.remove(); }); }); }); </script> </head> <body> <div id="div1"> <input type="file" id="upload"/> <input type="button" id="btn" value="more" onclick="addMore();"/> </div> <div id="div2"></div> </body> </html>- 上一个程序编程： jquery获取JSON对象中数据的示例
- 下一个程序编程： 移动节点的jquery代码
