首页 > 代码库 > 任意增减文件上传栏

任意增减文件上传栏

2024-07-18 10:28:28   218人阅读

1. [图片] 实现任意增减 文件上传栏    

2. [图片] 实现任意增减 文件上传栏    


?3. [代码][JavaScript]代码     
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript" src="http://www.mamicode.com/jquery-1.4.4.js"></script>
<script type="text/javascript">
 
var addMore = function()
{
    var div = document.getElementById("div1");
 
    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，同上等价的实现
var count = 0;
 
$(function()
{
    $("input[type=button]").click(function()
    {http://www.huiyi8.com/bgm/?
        var br = $("<br>");背景音乐
        var input = $("<input type=‘file‘>");
        var button = $("<input type=‘button‘ value=http://www.mamicode.com/‘Remove" + (++count) + " ‘>");
 
        $("#div1").append(br).append(input).append(button);
 
        button.click(function()
        {
            br.remove();
            input.remove();
            button.remove();
        });
    });
});
 
*/
 
 
</script>
 
 
 </head>
 
  
  
 <body>
   
<input type="file"> <input type="button" onclick="addMore()" value="http://www.mamicode.com/more...">
 
<div id="div1"></div>
 
 </body>
</html>


联系
我们