萬盛學電腦網 >> 腳本專題 >> javascript >> js及jquery實現動態的文件上傳操作按鈕的添加和刪除
js及jquery實現動態的文件上傳操作按鈕的添加和刪除
本文為大家介紹下使用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>javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved