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;width: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;width: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;width: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>