关于Html动态添加上传文件控件inputFile（附件）及清除已选择的文件的几个方法

最新推荐文章于 2024-07-11 15:51:57 发布

sallay

最新推荐文章于 2024-07-11 15:51:57 发布

阅读量2.1w

点赞数 1

分类专栏： JS&amp;HTML&amp;CSS 文章标签： html input button delete file javascript

本文链接：https://blog.csdn.net/sallay/article/details/3335362

版权

JS&HTML&CSS 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

一、动态添加上传文件控件

1. 案例一：

 
 <HTML>
    <HEAD>
        <TITLE>上传文件</TITLE>
        <SCRIPT language=javascript type=text/javascript>
        <!--
            var RES_BT_DELETE = "删除";
            var isIE = (navigator.userAgent.indexOf("MSIE") != -1);
            var fileIndex = 0;
            
            function addFile() 
            {
                var spanId = "filespan";
                var fileId = "uploadfile" + (fileIndex++);
                addInputFile(spanId, fileId);
            }
            
            function addInputFile(spanId, fileId) 
            {
                var span = document.getElementById(spanId);
                if (span != null) 
                {
                    var divObj = document.createElement("div"), fileObj, delObj;
                    divObj.id = fileId;
                    
                    if (isIE) 
                    {
                        fileObj = document.createElement("<input type=file onchange=changeFile(form)>");
                        delObj = document.createElement("<input type=button onclick=delInputFile('" + spanId + "','" + fileId + "')>");
                    } 
                    else 
                    {
                        fileObj = document.createElement("input");
                        fileObj.type = "file";
                        fileObj.setAttribute("onchange", "changeFile(form)", 0);
                        delObj = document.createElement("input");
                        delObj.type = "button";
                        delObj.setAttribute("onclick", "delInputFile('" + spanId + "','" + fileId + "')", 0);
                    }
            
                    fileObj.name = fileId;
                    fileObj.size = "40";
                    fileObj.className = "input";
                    delObj.value = RES_BT_DELETE;
                    divObj.appendChild(fileObj);
                    divObj.appendChild(document.createTextNode(" "));
                    divObj.appendChild(delObj);
                    span.appendChild(divObj);
                }
            }
            
            function delInputFile(spanId, fileId) 
            {
                var span = document.getElementById(spanId);
                var divObj = document.getElementById(fileId);
                if (span != null && divObj != null) 
                {
                    span.removeChild(divObj);
                }
            }
        //-->
        </SCRIPT>
        <META content="MSHTML 6.00.2800.1528" name=GENERATOR>
    </HEAD>
    
    <BODY class=pagebackground>
        <FORM id=form action=XXX method=post encType=multipart/form-data>
            <TABLE class=dialog1 height=20 cellSpacing=1 cellPadding=8 width="90%" align=center>
                <TBODY>
                <TR>
                    <TD noWrap>通过文件上传: </TD>
                    <TD id=filespan noWrap>
                        <INPUT class=input type=file size=40 name=file>
                        <INPUT id=btnAdd onclick=addFile() type=button value=添加>
                    </TD>
                </TR>
                </TBODY>
            </TABLE>
        </FORM>
    </BODY>
</HTML>
 

2. 案例二：

 
 <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <title>新建网页 1</title>
    </head>
    <body>
        <script language=JavaScript>
            function fAddAttach()
            {
               var gAttchHTML='<div class="qrle text2">附件：</div><div class="le"><input type="file" name="attachfile[]"  class="bot3" ></div><div class="le"><input type="button" name="Submit" value=" 删除 " class="bot2" id="btnDeleteReadAttach"  /></div><span></span>';
               var Attach=document.getElementById("dvReadAttach");
               var spnList=Attach.getElementsByTagName("SPAN");
               var spn=document.createElement("DIV");
               spn.className="qrc4";
               spn.innerHTML=gAttchHTML;
               spn.childNodes[1].childNodes[0].name="attachfile[]" + spnList.length;
               Attach.appendChild(spn);
               fGetObjInputById(spn,"btnDeleteReadAttach").onclick=function(){fDeleteAttach(this);};
               document.getElementById("aAddAttach").innerHTML="继续添加附件";
               Attach.style.display="";
               if(spnList.length>1)
               {
                 spn.childNodes[0].innerHTML="   ";
               }
            }
            function fGetObjInputById(obj,id)
            {
               var inputList=obj.getElementsByTagName("INPUT");
               for(var i=0;i<inputList.length;i++)
               {
                 if(inputList[i].id==id)
                 {
                    return inputList[i];
                 }
               }
               return null;
            }
            
            function fDeleteAttach(obj)
            {
                try
                {
                    obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
                    var Attach=$("dvReadAttach");                       
                    var spnList=Attach.getElementsByTagName("SPAN");
                    if(spnList.length==0)
                    {
                         document.getElementById("aAddAttach").innerHTML="添加附件";
                         Attach.style.display="none";
                    }
                    else
                    {
                        document.getElementById("aAddAttach").innerHTML="继续添加附件";
                    }
                }
                catch(exp)
                {
                    //fDebug("fDeleteAttach",exp.description);
                }
            }
        </script>
        <BODY BGCOLOR=WHITE> 
            <a href="javascript:fAddAttach();" id="aAddAttach">添加附件</a>
            <div id="dvReadAttach" style="display:none">
        </BODY>
    </body>
</html>
 

二、清空inputFile的内容

1. 方法一：

 
 <FORM name=form1>   
  <input type="file" name=f>   
  <input type=button value=reset onclick="f.select();document.execCommand('delete')">   
</FORM>   
 

2. 方法二：

 
 <FORM name=form1>   
  <input type="file" name=f>
  <input type=button value=reset onclick="form1.f.outerHTML='<input type=/'file/' name=/'f/'>'"> 
</FORM>
 