文件上传简介1---上传到指定的目录2_点击上传时要绑定左侧目录id-CSDN博客

本文链接：https://blog.csdn.net/xuxu198899223/article/details/8900539

节摘要：上节解决了上传文件到本机指定目录，本节主要是在上节的基础上对前台显示的html页面做一下修改，实现动态的增加文件输入框s。

新建upload2.html（放在和upload.html文件的同一个目录下）

代码如下：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
   <head>
     <title>upload2.html</title>
     
     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
     <meta http-equiv="description" content="this is my page">
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     
     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 
 <script> 
 function mCreateFile(obj){ 
 var eF 
 var mName 
   mFileName.innerHTML="" 
 if (obj.id=="File") { 
 
    mstatus.innerHTML="总共有 <b>"+(mFile.children.length-1)+"</b> 个文件等待上传" 
 
 for (i=0;i<mFile.children.length-1;i++) 
     { 
 if (mFile.children.value=="") { 
               mFile.removeChild(mFile.children) 
       } 
 else 
       { 
         mName=mFile.children.value.split("\\") 
         mFileName.innerHTML+="<div id=NameDetail title='"+mName[mName.length-1]+"'>"+mName[mName.length-1]+"</div>" 
       } 
     } 
 
   } 
   
 if (obj.id=="File_New") { 
   eF=document.createElement('<input type="file" name="File" size="23" id=File_New onpropertychange="mCreateFile(this)">') 
   mFile.appendChild(eF) 
   obj.id="File" 
   } 
 } 
 </script> 
 <style> 
 table{ 
 FILTER: progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#999999,strength=3); 
 } 
 input{ 
 border:1px soild #000000; 
 font-family:Verdana,Arial,宋体; 
 font-size:12px; 
 padding:2px; 
 } 
 #mTD{ 
   LINE-HEIGHT: 24px; 
 } 
 #mFile{ 
 width:203px; 
 float:left; 
 | 
 #mFileName{ 
 float:right; 
 width:182px; 
 } 
 #NameDetail{ 
 overflow:hidden; 
 width:176px; 
 color:#000000; 
 font-family:Verdana,Arial,宋体; 
 font-size:12px; 
 cursor:default; 
 height:22px; 
 } 
 #mstatus{ 
 font-size:12px; 
 color:#ff0000; 
 } 
 </style> 
   </head>
   
 <body> 
     <form name="uploadform" method="POST" action="upload"
             ENCTYPE="multipart/form-data">
 <div align="center"> 
 <table border="1" width="420" style="border-collapse: collapse" bordercolor="#0066cc" cellpadding="4" bgcolor="#D0F0FF"> 
 <tr> 
 <td bgcolor="#3399FF" height="26" align="center"><font color="#FFFFFF" size="3"><b>添加附件</b></font></td> 
 </tr> 
 <tr> 
   <td id=mTD> 
 <div id=mFile><input type="file" name="File" size="23" id=File_New onpropertychange="mCreateFile(this)"></div> 
 <div id=mFileName></div> 
         <div id=mstatus>总共有 <b>0</b> 个文件等待上传</div>       
   </td> 
 </tr> 
 </table> 
                     <div id="upload">            
                     <input name="upload" type="submit" value="开始上传" />
                     </div>
 </div> 
 </form> 
 </body>

访问的url如下：

http://localhost:8080/UpDown/upload2.html

运行截图1：