这是主页面<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path =
request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"
;
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>HTML5文件拖动上传</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
.up {
width:600px; height:100px; border: 1px solid;
text-align: center; line-
height: 100px; color: #72FD31;
}
.ne {
width:600px; height:400px; border: 1px solid;
margin-
top:20px
}
</style>
</head>
<body>
<div style="margin: 20px 400px">
<div class="up" id="upflies">将文件拖拽到此处上传</div>
<div class="ne" id="content1"></div>
</div>
<script type="text/javascript">
//1:文件上传html5
//知识点：drag 把文件拖拽到浏览器的默认行为是下载或打开
document.ondragleave =
function(e) {
e.preventDefault(); //拖动元素离开的事件
};
document.ondrop =
function(e) {
e.preventDefault(); //文件拖放松开以后的事件
};
document.ondragover =
function(e) {
e.preventDefault();
};
function tm_upload() {
//2:通过html5拖拽事件，ondrop,然后通过拖动区域监听浏览器的drop事件达到文件上传的目的
var uploadArea = document.getElementById("upflies"
);
//监听文件上传区域的文件松开事件
uploadArea.addEventListener("drop",
function(e) {
e.preventDefault();
//3:从事件event中获取拖拽到浏览器的文件信息
//获取事件的文件列表信息
var fileList =
e.dataTransfer.files;
var length =
fileList.length;
for(
var i=0;i<length;i++
) {
//alert(fileList[i].type); //显示上传文件的类型
//获得图片流
var img = window.webkitURL.createObjectURL(fileList[i]);
//火狐不支持！
//获取文件名称
var fileName =
fileList[i].name;
//获取文件的大小
var fileSize =
fileList[i].size;
var str = "<div><img src='"+img+"' height='20%x' width='20%' /><p>文件名称："+fileName+"</p><p>大小："+fileSize+"<p/></div>"
document.getElementById("content1").innerHTML +=
str;
//4:通过XMLHttpRequest上传文件到服务器
var xhr =
new XMLHttpRequest();
xhr.open("post", "data.jsp",
true);
//代表异步提交，false表示非异步
//判断是不是一个ajax
xhr.setRequestHeader("X-Requested-with", "XMLHttpRequest"
);
//5:通过HTML5 FormData动态设置表单元素
var formdata =
new FormData();
//动态给表单赋值，传递二进制文件
//6:获取服务器上的文件信息
formdata.append("doc"
,fileList[i]);
//7:编写data.jsp上传页面
xhr.send(formdata);
}
});
}
tm_upload();
</script>
</body>
</html>- - -- - -- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -- - - - -- - -- - - - - - - - - -data.jsp 这里是处理页面
<%@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 language="java"
import="java.util.*" pageEncoding="UTF-8"%>
<%
/*
1:文件上传jar包
2:创建服务器目录 upload
3:从request对象获取我们ajax传输的文件信息
4:将客户端传递过来的文件上传到 upload目录下
a:一定要对文件重命名？，文件不支持中文
*/
//设置编码
request.setCharacterEncoding("UTF-8"
);
response.setCharacterEncoding("UTF-8"
);
//获取服务器的根目录
String rootPath = request.getRealPath("/"
);
System.out.println("服务器路径："+
rootPath);
String uploadPath = rootPath+"/upload"
;
File file =
new File(uploadPath);
//自动创建目录
if(!file.exists()){file.mkdirs();}
//判断是否存在这个文件夹
//创建一个文件对象工厂
FileItemFactory factory =
new DiskFileItemFactory();
ServletFileUpload upload =
new ServletFileUpload(factory);
//从请求对象中获取文件信息
List items =
upload.parseRequest(request);
if (items!=
null) {
Iterator iterator =
items.iterator();
while (iterator.hasNext()) {
FileItem item =
(FileItem)iterator.next();
//判断是否为表单里提交上来的
if (item.isFormField()){
continue;
}else{
String fileName =
item.getName();
long size =
item.getSize();
System.out.println(fileName+" - - - "+
size);
//文件上传到服务器
int pos = fileName.lastIndexOf("."
);
//获取文件后缀
String ext =
fileName.substring(pos,fileName.length());
fileName = UUID.randomUUID().toString()+
ext;
File saveFile =
new File(uploadPath,fileName);
//上传
item.write(saveFile);
}
}
}
%>Commons-FileupLoad.jar 下载：http://pan.baidu.com/s/1o6FpGHc
转载于:https://www.cnblogs.com/daidai-99/p/4442704.html
相关资源：HTML5拖拽文件到浏览器并实现文件上传下载功能代码
