实现动态的文件上传操作按钮的添加和删除

来源：互联网发布：seo方面的工作编辑：程序博客网时间：2024/06/05 14:41

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实现

<!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);
           }**/
       //节点的移动
       var count = 0;
       $(function(){
           $("input[type=button]").click(function(){
               var br = $("<br>");
               var input = $("<input type='file'/>");
               var button = $("<input type='button' value='Remove" + (++count) + "'/>");

               $("#div2").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"/>
    </div>
    <div id="div2"></div>
</body>
</html>

0 0