云盘上传技术

2016-12-13 08:08:04来源:CSDN作者:nupotian人点击

第七城市

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;				//将这一秒上传的内容置为0				oldUpload=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());		 }	}}



第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台