在大型企业的开发过程中，很多比较有趣而实际的功能往往都是让大家望而却步，我给大家带来一个百度云盘和360云盘的HTML5多文件拖动上传技术：
1：记得导入:common-fileupload.jar包.
上传upload.jsp页面
<%@page import="org.apache.struts2.json.JSONUtil"%>
<%@page import="java.io.File"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@page import="org.apache.commons.fileupload.FileItemFactory"%>
<%@page import="java.text.DecimalFormat"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
//获取文件的上传的具体目录
String realPath = request.getRealPath("/");
//定义上传的目录
String dirPath = realPath+"/upload";
File dirFile = new File(dirPath);
//自动创建上传的目录
if(!dirFile.exists())dirFile.mkdirs();
//上传操作
FileItemFactory factory = new DiskFileItemFactory();
//
ServletFileUpload upload = new ServletFileUpload(factory);
String fileName = null;
HashMap<String,Object> map = new HashMap<String,Object>();
try{
List items = upload.parseRequest(request); //3name=null name=null
if(null != items){
Iterator itr = items.iterator();
while(itr.hasNext()){
FileItem item = (FileItem)itr.next();
if(item.isFormField()){
continue;
}else{
fileName = item.getName();
int pos = fileName.lastIndexOf(".");
String ext = fileName.substring(pos, fileName.length());
fileName = UUID.randomUUID().toString()+ext;
//上传文件的目录
File savedFile = new File(dirPath,fileName);
item.write(savedFile);
map.put("name",item.getName());//文件的原始名称
map.put("newName",fileName);//文件的新名称
map.put("size",item.getSize());//文件的真实大小
map.put("url","upload/"+fileName);//获取文件的具体服务器的目录
//我可以建立一个文件表。把上传的文件存在表中.--文件夹表一个文件表---云盘
}
}
}
}catch(Exception e){
}
out.print(JSONUtil.serialize(map));
%>
main.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>html5拖动文件上传</title>
<style>
*{padding:0px;margin:0px}
body{font-family: "微软雅黑";font-size: 12px;background: #394E48;color:#fff;}
.demo{width:900px; margin:50px auto;position: relative;}
#drop_area{width:100%; height:100px; border:3px dashed silver; line-height:100px; text-align:center; font-size:36px; color:#d3d3d3}
#preview{width:900px; overflow:hidden;border:1px dashed silver; margin-top:10px;}
#preview div{float: left;padding: 9px;text-align: center;margin:6px;background:#f9f9f9;width:195px;height: 160px;}
#preview img{width: 80px;height: 80px;}
#program{background:#999; height:100px;color:#d3d3d3;position: absolute;top:0px;left:0px;background:linear-gradient(#141414,red);opacity:0.5}
</style>
</head>
<body>
<div id="main">
<div class="demo">
<div style="text-align: center;margin-bottom: 20px;"><h1 style="font-size: 36px;"></h1></div>
<div id="program"></div>
<div id="drop_area">将图片拖拽到此区域</div>
<div id="preview"></div>
</div>
</div>
<script type="text/javascript">
var timer = null;
//拖离事件-离开的时候调用
document.ondragleave =function(e){
e.preventDefault();
document.getElementById("drop_area").style.background="none";
console.log("拖动移动离开的时候");
};
//拖方后
document.ondrop =function(e){
e.preventDefault();
document.getElementById("drop_area").style.background="none";
document.getElementById("drop_area").innerHTML = "请稍后，文件上传中...";
var p = 0;
timer = setInterval(function(){
if(p>=100)p=0;
document.getElementById("program").style.width=p+"%";
p++;
},17);
console.log("拖动抬起的时候");
};
//拖动移动的时候
document.ondragover =function(e){
e.preventDefault();
document.getElementById("drop_area").style.background="linear-gradient(#141414,#ff0000)";
console.log("拖动移动的时候");
};
document.ondragenter =function(e){
e.preventDefault();
document.getElementById("drop_area").style.background="#141414";
console.log("拖动按下的时候");
};
function tmupload(){
var box = document.getElementById("drop_area"); //拖拽区域
box.addEventListener("drop",function(e){//监听拖放后事件
e.preventDefault();//取消浏览器的默认行为
//获取文件对象
var fileList = e.dataTransfer.files;
//检查是否拖拽文件到页面
var length = fileList.length;
if(length==0){
return false;
}
for(var i=0;i<length;i++){
var img = window.webkitURL.createObjectURL(fileList[i]);
var filename = fileList[i].name;
var filesize = fileList[i].size;
var str = "<div><img src=‘"+img+"‘><p>图片名称："+filename+"</p><p>大小："+filesize+"KB</p></div>";
document.getElementById("preview").innerHTML +=str;
//通过XMLHttpRequest(ajax)上传
var xhr = new XMLHttpRequest();
xhr.open("post","upload.jsp", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
//利用FormData动态发送表单数据
var fd = new FormData();
fd.append("doc", fileList[i]);
xhr.send(fd);
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
setTimeout(function(){
clearInterval(timer);
document.getElementById("drop_area").innerHTML = "请稍后，文件上传中...";
document.getElementById("program").style.width="0%";
},2000);
}
};
}
});
}
tmupload();//开始上传
</script>
</body>
</html>
时间： 2024-12-18 16:54:00