java实现多文件上传01

Posted 2021-01-24 勇敢な心
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了java实现多文件上传01相关的知识，希望对你有一定的参考价值。
<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>
以上是关于java实现多文件上传01的主要内容，如果未能解决你的问题，请参考以下文章
java多文件上传显示进度条
Android实战----基于Retrofit实现多图片/文件图文上传
多文件上传以及java后台接受
java文件上传下载用哪种技术好？