云盘上传技术

来源：互联网发布：psv梦幻之星捏脸数据编辑：程序博客网时间：2024/04/29 06:33

1.页面效果图如图所示

2.页面的代码如下所示

<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%><!DOCTYPE html ><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>百度云盘上传技术-熊盼</title><style type="text/css">* {margin: 0px;padding: 0px;}body {color: #fff;background:#574282;}h1 {text-align: center;color: #fff;text-shadow: 0px 0px 2px red;margin-top:30px;}a {display: block;width: 104px;height: 20px;margin: 30px auto;text-decoration: none;text-align: center;line-height: 20px;background: #000;color: #fff;border-radius: 14px;padding: 5px 5px;box-shadow: 0px 0px 5px 0px;}a:hover {box-shadow: 0px 0px 10px 0px #fff;background: rgba(0, 0, 0, 0.5);}.upLoadDialog {width: 600px;background: #fff;position: absolute;bottom: 5px;right: 5px;box-shadow: 0px 0px 5px #fff;}.upLoadDialog .title {background: #2f4f6f;height: 25px;line-height: 25px;font-family: "微软雅黑";box-shadow: 0px 2px 2px #000;}.upLoadDialog .progress {min-height: 280px;display: none;}ul {border-bottom: 1px solid #e5e5e5;padding: 0px;margin: 0px;}ul:after {clear: both;content: "";display: block;}li {color: #000;list-style: none;float: left;font-size: 14px;font-family: "微软雅黑";}</style></head><body><h1>百度云盘上传技术-熊盼</h1><input type="file" multiple style="display: none" id="filechoice"onchange="doUpFile()" /><a href="javascript:void(0);" onclick="choice()">选择文件上传</a><div class="upLoadDialog"><div class="title">正在上传</div><div class="progress"></div></div><script type="text/javascript" src="js/jquery-3.1.1.min.js"></script><script type="text/javascript">function choice(){//触发文件选择框的点击事件document.getElementById('filechoice').click();}function doUpFile(){$('.progress').empty();$('.progress').slideDown("slow");//拿到所有的文件var files=document.getElementById('filechoice').files;var tmpHtml="";for(var i=0;i<files.length;i++){var file=files[i];tmpHtml+="<ul>";tmpHtml+="<li style='width: 45%'>"+file.name+"</li>";tmpHtml+="<li style='width: 30%'><progress max=100 id='pro"+i+"'></progress></li>";tmpHtml+="<li style='width: 23%' id='label"+i+"'>文件校验中.....</li>";tmpHtml+="</ul>";fileUp(file,i);}$('.progress').append(tmpHtml);}function fileUp(file,index){var form=new FormData();form.append(file.name,file);//创建ajax的核心对象var xhr=new XMLHttpRequest();var percent;var oldUpload=0,curUpload=0,total=0;xhr.upload.addEventListener("progress",function(event){//event事件中包含了上传多少percent=Math.round(event.loaded/event.total*100);//将百分比做到进度条中$("#pro"+index).val(percent);curUpload=event.loaded;if(oldUpload==0){total=event.total;oldUpload=curUpload;}},false);//速度=当前已经上传的(curUpload)-上一个时间点已经上传的(oldUpload)//一秒钟执行一次，所以两个之差就是速度var speed=setInterval(function(){if(oldUpload!=0){var speed=curUpload-oldUpload;var leave=total-curUpload;//将这一秒上传的内容置为0oldUpload=curUpload;if(speed>(1024*1024)){//jQuery的id选择器$("#label"+index).html(Math.round(speed/(1024*1024)*100)/100.0+"M/s,"+"(剩余"+Math.round(leave/speed)+"秒)");}else if(speed>1024){$("#label"+index).html(Math.round(speed/(1024*1024)*100)/100.0+"KB/s"+"(剩余"+Math.round(leave/speed)+"秒)");}else if(speed>0){$("#label"+index).html(speed+"BYTE/S,"+"(剩余"+Math.round(leave/speed)+"秒)");}if(percent==100){$("#label"+index).html("上传完成");//定时器 断点上传 把现在上传的文件进行拆分做断电上传clearInteval(speed);}}},1000);//发送到后台xhr.open("post","FileUpServlet",true);xhr.send(form);}</script></body></html>

3.文件上传的处理类

package com.xp.fileUp;import java.io.IOException;import java.util.Collection;import javax.servlet.ServletException;import javax.servlet.annotation.MultipartConfig;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.Part;@WebServlet("/FileUpServlet")@MultipartConfigpublic class FileUpServlet extends HttpServlet {private static final long serialVersionUID = 1L;protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//这个是磁盘的绝对路径String savePath=request.getServletContext().getRealPath("/files");//设置保存文件的路径System.out.println(savePath); Collection<Part> files=request.getParts(); for(Part file:files){ file.write(savePath+"/"+file.getName()); }}}

1 0