文件上传简介1---上传到指定的目录2
文件上传简介1---上传到指定的目录2本节摘要：上节解决了上传文件到本机指定目录，本节主要是在上节的基础上对前台显示的html页面做一下修改，实现动态的增加文件输入框s。
新建upload2.html（放在和upload.html文件的同一个目录下）
代码如下：
upload2.html1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">2 <html>3 <head>4 <title>upload2.html</title>5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">7 <meta http-equiv="description" content="this is my page">8 <meta http-equiv="content-type" content="text/html; charset=UTF-8">9 10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 1112 <script>13 function mCreateFile(obj){14 var eF15 var mName16 mFileName.innerHTML=""17 if (obj.id=="File") {1819 mstatus.innerHTML="总共有 <b>"+(mFile.children.length-1)+"</b> 个文件等待上传"2021 for (i=0;i<mFile.children.length-1;i++)22 {23 if (mFile.children.value=="") {24 mFile.removeChild(mFile.children)25 }26 else27 {28 mName=mFile.children.value.split("\\")29 mFileName.innerHTML+="<div id=NameDetail title='"+mName+"'>"+mName+"</div>"30 }31 }3233 }34 35 if (obj.id=="File_New") {36 eF=document.createElement('<input type="file" name="File" size="23" id=File_New onpropertychange="mCreateFile(this)">')37 mFile.appendChild(eF)38 obj.id="File"39 }40 }41 </script>42 <style>43 table{44 FILTER: progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#999999,strength=3);45 }46 input{47 border:1px soild #000000;48 font-family:Verdana,Arial,宋体;49 font-size:12px;50 padding:2px;51 }52 #mTD{53 LINE-HEIGHT: 24px;54 }55 #mFile{56 width:203px;57 float:left;58 |59 #mFileName{60 float:right;61 width:182px;62 }63 #NameDetail{64 overflow:hidden;65 width:176px;66 color:#000000;67 font-family:Verdana,Arial,宋体;68 font-size:12px;69 cursor:default;70 height:22px;71 }72 #mstatus{73 font-size:12px;74 color:#ff0000;75 }76 </style>77 </head> 78 79 <body>80 <form name="uploadform" method="POST" action="upload" 81 ENCTYPE="multipart/form-data"> 82 <div align="center">83 <table border="1" width="420" style="border-collapse: collapse" bordercolor="#0066cc" cellpadding="4" bgcolor="#D0F0FF">84 <tr>85 <td bgcolor="#3399FF" height="26" align="center"><font color="#FFFFFF" size="3"><b>添加附件</b></font></td>86 </tr>87 <tr>88 <td id=mTD>89 <div id=mFile><input type="file" name="File" size="23" id=File_New onpropertychange="mCreateFile(this)"></div>90 <div id=mFileName></div>91 <div id=mstatus>总共有 <b>0</b> 个文件等待上传</div> 92 </td>93 </tr>94 </table>95 <div id="upload"> 96 <input name="upload" type="submit" value="开始上传" /> 97 </div> 98 </div>99 </form> 100 </body>
复制代码访问的url如下：
http://localhost:8080/UpDown/upload2.html
运行截图1：
截图2：
谢谢分享
页:
[1]