<%--
Created by IntelliJ IDEA.
User: ASUS
Date: 2021/10/31
Time: 15:07
To change this template use File | Settings | File Templates.
--%>
<%@ 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>文件拖动上传</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">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<%-- //<link type="text/css" rel="stylesheet" href="css/test3.css">--%>
<style type="text/css">
.on{
width: auto;
}
.up {
width:800px; height:200px; border: 1px solid;
text-align: center; line-height: 100px; color: #2e3a1f;
margin-left: 0px;
margin-top: 10px;
}
.ne {
width:1000px; height:400px; border: 0px solid;
margin-top:20px;
text-align: center;
}
</style>
<%
Object message = request.getAttribute("message1");
System.out.println(message);
if(message!=null && !"".equals(message)){
System.out.println(111111);
%>
<script type="text/javascript">
alert("<%=request.getAttribute("message1")%>");
</script>
<%} %>
</head>
<body>
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item"><a href="">请选择上传文件</a></li>
</ul>
<div class="on">
<div class="up" id="upflies">拖拽上传文件</div>
<div class="ne" id="content1">
<table class="layui-table">
<colgroup>
<col width="150">
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>图片</th>
<th>名称</th>
<th>大小</th>
<th>操作</th>
</tr>
</thead>
<tbody id="content2">
<%-- <c:forEach items="${list}" var="item">--%>
<%-- <tr>--%>
<%-- <td>${item.title}</td>--%>
<%-- <td><a href="${item.lianjie}">点击此处查看原文</a></td>--%>
<%-- <td>${item.zhaiyao}</td>--%>
<%-- <td>${item.zuozhe}</td>--%>
<%-- <td>${item.time}</td>--%>
<%-- </tr>--%>
<%-- </c:forEach>--%>
</tbody>
</table>
</div>
</div>
<%--<div style="margin-right: 60px">--%>
<%-- <div style="text-align: right">--%>
<%-- <a href="db.jsp" class="layui-btn">下一步</a>--%>
<%-- </div>--%>
<%-- <button type="submit" class="layui-btn" lay-submit="" onclick="confirmit()">立即创建</button>--%>
<%--</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); //显示上传文件的类型
if (fileList[i].type!="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"){
alert("请上传正确的文件类型!");
break;
}
//获得图片流
var img = window.webkitURL.createObjectURL(fileList[i]); //火狐不支持！
var img1="img/img.png";
//获取文件名称
var fileName = fileList[i].name;
//获取文件的大小
var fileSize = fileList[i].size;
//文件的操作
var fileMake="查看文件库";
var str = "<tr><td><img src='"+img1+"' height='20%x' width='20%' /></td><td>"+fileName+"</td><td>"+fileSize+"<td/><a href='fileall.jsp'>"+fileMake+"</a></tr>"
document.getElementById("content2").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>
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
layui.use('element', function(){
var $ = layui.jquery
,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
//触发事件
var active = {
setPercent: function(){
//设置50%进度
element.progress('demo', '50%')
}
,loading: function(othis){
var DISABLED = 'layui-btn-disabled';
if(othis.hasClass(DISABLED)) return;
//模拟loading
var n = 0, timer = setInterval(function(){
n = n + Math.random()*10|0;
if(n>100){
n = 100;
clearInterval(timer);
othis.removeClass(DISABLED);
}
element.progress('demo', n+'%');
}, 300+Math.random()*1000);
othis.addClass(DISABLED);
}
};
$('.site-demo-active').on('click', function(){
var othis = $(this), type = $(this).data('type');
active[type] ? active[type].call(this, othis) : '';
});
});
</script>
</body>
</html>
