1、html代码
<html> <head> <link rel="stylesheet" type="text/css" href="table.css" /> <link rel="stylesheet" type="text/css" href="frame.css" /> </head> <body> <div style="border:1px red solid;500px;"> <table> <tr> <td width="17%" style="text-align:right; word-break:break-all;">文件:</td> <td style="text-align:center;"> <label id="fileBind" for="numFile1"><div style="background:#441c2c47;70px;height:20px;line-height: 20px">选择文件</div></label> <div id="filesdiv"> <input id='numFile1' name='numFile1' type=file onchange="addFiles()" class="numfileclass" style='display:none;'/> </div> </td> </tr> <br/> <tr> <td colspan="2"> <div style="margin-right: 100px;"> <table id="vss"> <div id="vss"> </div> <div id="vssSum"> <tr style='background-color:#ffffff' id='trsum'> <td width="100px" style='border-left:0;border-right:0' align='left' valign='middle' >文件总大小:</td> <td width='60px' style='border-left:0;border-right:0' align='left' id="sumsize" valign='middle'>0</td> <td width='100px' style='border-left:0;border-right:0' align='left' name='Kind' valign='middle'><a onclick="deleteSum('trsum')">全部删除</a></td> </tr> </div> </table> </div> </td> </tr> <tr> <td > <input type="hidden" id = "upResult" style="color: red" value = "0"></input> </td> </tr> <div style="display: none;" id="allfilename" ></div> </table> </div> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript"> var fileCount = 1; var sumSize = 0; $("#vssSum").hide(); function addFiles() { var obj = $("#numFile" + fileCount); var pathValue = ""; pathValue = $("#numFile" + fileCount).val(); var index = pathValue.lastIndexOf("\"); var name = pathValue.substring(index + 1); if (name.length > 12) { name = name.substring(0, 12) + "...."; } var fileSize = $("#numFile" + fileCount)[0].files[0].size; var size = bytesToSize(fileSize); sumSize = sumSize + fileSize; $("#upResult").val(sumSize); if (true) { if ($("#tr" + fileCount).length == 0) { $("#vss").prepend("<tr style='background-color:#ffffff' id='tr" + fileCount + "'><td width='180px' style='border-left:0;border-right:0' align='left' valign='middle' >"+name+"</td><td width='60px' style='border-left:0;border-right:0' align='left' name='FName' valign='middle'>" + size + "</td><td width='83px' style='border-left:0;border-right:0' align='left' name='Kind' valign='middle'><a onclick=ddll('tr" + fileCount + "')>删除</a></td></tr>"); $("#numFile" + fileCount).css("display", "none"); fileCount++; console.log("fileCount:"+fileCount); var ss = $("#filesdiv").html(); var ss1 = "<input type='file' id='numFile" + fileCount + "' name='numFile" + fileCount + "' value='' onchange='addFiles();' class='x-numfileclass'"; var style = " style='height:23px;100px'"; ss1 += style + "/>"; $("#filesdiv").prepend(ss1); $("#fileBind").attr("for","numFile"+fileCount); $("#allfilename").append(pathValue + ";"); } } if(fileCount>1){ $("#vssSum").show(); $("#sumsize").html(bytesToSize(sumSize)); } } /* *将字节进行转换 */ function bytesToSize(bytes) { if (bytes === 0) return '0 B'; var k = 1024, sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], i = Math.floor(Math.log(bytes) / Math.log(k)); return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]; } //删除该行文件 function ddll(idd) { if (confirm("是否要删除该文件")) { $("#" + idd + "").remove(); var filename = idd.replace("tr", "numFile"); var curSize = $("#" + filename)[0].files[0].size; sumSize = sumSize - curSize; $("#upResult").val(sumSize); $("#sumsize").html(bytesToSize(sumSize)); $("#" + filename).remove(); } } function deleteSum(idd) { if (confirm("是否要删除所有文件")) { var str1 = "<input id='numFile1' name='numFile1' type='file' onchange='addFiles()' class='numfileclass' style='display:none;'/> "; $("#filesdiv").html(str1); $("#vss").html(""); $("#sumsize").html("0"); fileCount = 1; sumSize = 0; $("#fileBind").attr("for","numFile"+fileCount); $("#upResult").val(sumSize); } } </script> </body> </html>