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>

java实现多文件上传01的更多相关文章

  1. 【Java】JavaWeb文件上传和下载

    文件上传和下载在web应用中非常普遍,要在jsp环境中实现文件上传功能是非常容易的,因为网上有许多用java开发的文件上传组件,本文以commons-fileupload组件为例,为jsp应用添加文件 ...

  2. Java FtpClient 实现文件上传服务

    一.Ubuntu 安装 Vsftpd 服务 1.安装 sudo apt-get install vsftpd 2.添加用户(uftp) sudo useradd -d /home/uftp -s /b ...

  3. Java中实现文件上传下载的三种解决方案

    第一点:Java代码实现文件上传 FormFile file=manform.getFile(); String newfileName = null; String newpathname=null ...

  4. 【原创】用JAVA实现大文件上传及显示进度信息

    用JAVA实现大文件上传及显示进度信息 ---解析HTTP MultiPart协议 (本文提供全部源码下载,请访问 https://github.com/grayprince/UploadBigFil ...

  5. Java下载https文件上传到阿里云oss服务器

    Java下载https文件上传到阿里云oss服务器 今天做了一个从Https链接中下载音频并且上传到OSS服务器,记录一下希望大家也少走弯路. 一共两个类: 1 .实现自己的证书信任管理器类 /** ...

  6. java+web+大文件上传下载

    文件上传是最古老的互联网操作之一,20多年来几乎没有怎么变化,还是操作麻烦.缺乏交互.用户体验差. 一.前端代码 英国程序员Remy Sharp总结了这些新的接口 ,本文在他的基础之上,讨论在前端采用 ...

  7. Java开发系列-文件上传

    概述 Java开发中文件上传的方式有很多,常见的有servlet3.0.common-fileUpload.框架.不管哪种方式,对于文件上传的本质是不变的. 文件上传的准备 文件上传需要客户端跟服务都 ...

  8. Java开发之文件上传

    文件上传有SmartUpload.Apache的Commons fileupload.我们今天介绍Commons fileupload的用法. 1.commons-fileupload-1.3.1.j ...

  9. java web(四)文件上传与下载

     一.文件上传原理 1.在TCP/IP中,最早出现的文件上传机制是FTP ,它是将文件由客户端发送到服务器的标准机制:但是在jsp使用过程中不能使用FTP方法上传文件,这是由jsp运行机制所决定. 通 ...

随机推荐

  1. React应用程序设计过程中如何区分模块到底是state还是props？

    根据官方文档,满足以下任意条件的模块,就不是State,原文如下: 1.Is it passed in from a parent via props? If so, it probably isn’ ...

  2. logstash根据配置文件启动时，报异常

    请查看你的配置文件中是否包含了特殊字符,通常,复制黏贴过来的配置文件,会带有特殊字符.这个很影响logstash的启动. linux中查看文件中的特殊字符方法: 使用cat方法 cat -A 文件名 ...

  3. hdu 1754 I Hate It 线段树基础题

    Problem Description 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少. 这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就是按照老师的要求, ...

  4. 基于PHPExcel的常用方法总结

    // 通常PHPExcel对象有两种实例化的方式// 1. 通过new关键字创建空白文档$phpexcel = newPHPExcel();// 2. 通过读取已有的模板创建$phpexcel =PH ...

  5. Flutter 导入 import 'package:english_words/english_words.dart'

    import 'package:flutter/material.dart';import 'package:english_words/english_words.dart'; // 导入的包 vo ...

  6. Oracle 序列（自增ID）

    -- 创建序列CREATE SEQUENCE "JPADMIN"."SEQ_JP_BAS_USER_ID" MINVALUE 1 // 最小值MAXVALUE ...

  7. Linux批量杀掉挂掉的进程

    $ `ps aux | grep test | grep -v grep | awk '{print $2}'` 杀掉含有test且不含有grep的进程,后面的 awk '{print $2}' 是进 ...

  8. Activemq API使用(整合spring)

    整合spring之后,主要用的就是org.springframework.jms.core.JmsTemplate的API了,在spring-jms-xxx.jar中. 引入整合需要的jar包: &l ...

  9. Python+Selenium-BDD框架之behave

    (查看behave具体教程可以访问官网: http://pythonhosted.org/behave/) 1.安装behave 安装好python后,使用 pip install behave命令安 ...

  10. org.hibernate.QueryException: duplicate alias: r hibernate别名重复问题解决

    今天做项目的过程中发现,多表查询的时候如果使用hibernate的DetachedCriteria离线查询方式的时候, 在多表关联的时候我们需要使用别名的方式去实现. 但是代码运行的过程中抛出了下面的 ...