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. [BZOJ 3613][Heoi2014]南园满地堆轻絮

    传送门 这题......注意读题就行 刚开始读成了Ans = Σ{|A[j]-B[j]|}以为是道神题,结果是Ans = Max{|A[j]-B[j]|}. 嗯.......可以证明Ans = 最大的 ...

  2. window7下karma 报 The header content contains invalid characters BUG

    打开你的依赖node_modules\karma\node_modules\connect\lib\patch.js 将里面的setHeader方法改成下面这样,干掉序列化日期时出现的中文 res.s ...

  3. drf(djangorestframework)

    一.django restful_framework 核心思想: 缩减编写api接口的代码 Django REST framework是一个建立在Django基础之上的Web 应用开发框架,可以快速的 ...

  4. 修改TrustedInstaller权限文件

    我们在删除文件的时候有可能出现无法删除,并且需要TrustedInstaller提供的权限,所以我们主要修改该文件的拥有者(修改为本机用户)即可.下文举例哦,方法如下: 总结起来:修改文件的所有着为本 ...

  5. Python学习 day04

    一.list list可以存放各种类型的数据,与java中list类差不多,比如li = ['keith', 1, True, [1, 2, 3], {name: 'tangtang', age: 1 ...

  6. Python+Selenium之HTMLTestRunner

    下载 HTMLTestRunner 模块 下载地址:http://tungwaiyip.info/software/HTMLTestRunner.html 保存路径:将下载的HTMLTestRunne ...

  7. (转)shell--read命令的选项及用法

    shell--read命令 原文:https://www.cnblogs.com/lottu/p/3962921.html http://blog.csdn.net/skdkjzz/article/d ...

  8. 遍历方式 && 数组方法 && 算法

    遍历方式 一般,我们常用for in遍历对象,使用for (var i = 0; i < len; i++) {}的方式来遍历数组,这是最常用的两种方式,但是优缺点呢? 1.for (var i ...

  9. java中HashMap的keySet()和values()

    我们通常说,keySet()返回所有的键,values()返回所有的值,其实是不太对的,因为无论是keySet()和values(),其实都没有实质的内容,且容我慢慢说来. 他们前者返回了一个Set, ...

  10. 为数据赋能:腾讯TDSQL分布式金融级数据库前沿技术

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 简介:李海翔,网名"那海蓝蓝",腾讯金融云数据库技术专家.中国人民大学信息学院工程硕士企业导师.著有<数据库事务处 ...