<!DOCTYPE html>
|
<html>
|
<head>
|
<title>Excel上载</title>
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
<meta http-equiv="Pragma" content="no-cache">
|
<meta http-equiv="Cache-Control" content="no-cache">
|
<meta http-equiv="Expires" content="0">
|
<link href="../../css/control.css" rel="stylesheet" />
|
<link href="../../css/importer.css" rel="stylesheet">
|
<script src="../../js/jquery-1.7.2.min.js"></script>
|
<script src="../../js/core.js"></script>
|
<script src="../../js/control.js"></script>
|
<style>
|
.dropArea{
|
margin-left: 10px;
|
width:600px;
|
border-style: groove;
|
}
|
.taskline {
|
border-bottom: 1px #CCC dashed;
|
height: 28px;
|
width: 800px;
|
font-size: 15px;
|
font-family: 微软雅黑;
|
color: #333;
|
margin: 5px 0px 0px 50px;
|
}
|
progress::-webkit-progress-bar { background: #ccc; }
|
progress::-webkit-progress-value { background: #18bf5c; }
|
progress {
|
margin-left:220px;
|
display:block;
|
width:500px;
|
background:#ccc;
|
}
|
ie {
|
height:100%;
|
width:0%;
|
display:block;
|
background: #18bf5c;
|
}
|
</style>
|
|
<script type="text/javascript" >
|
var fileSelector, edt_fileName, btn_select;
|
var lbl_fileSize, lbl_progress, img_progress;
|
var dropArea, logdata, message, timer, progress;
|
var step_0, step_1;
|
|
function changeProgressValue(val) {
|
$("#progress").value = val;
|
}
|
/////////////////////选择上传文件//////////////////////
|
function selectFile() {
|
fileSelector.val("");
|
fileSelector.click();
|
}
|
|
function onSelectFile() {
|
var value = fileSelector.val();
|
edt_fileName.val(value);
|
|
var file = fileSelector[0].files[0];
|
var filename = file.name.toLowerCase();
|
if (filename.indexOf('.xlsx') == -1 && filename.indexOf('.xls') == -1) {
|
alert("您选择的不是Excel文件！");
|
return false;
|
}
|
|
upload(file);
|
}
|
|
function upload(file){
|
pos = file.name.lastIndexOf("\\");
|
var filename = file.name.substring(pos + 1);
|
|
Dialog.confirm("信息提示", "确定上载[" + filename + "]中的数据？", function(result){
|
if (result) {
|
lbl_fileSize.text(formatFileSize(file.size));
|
|
Server.upload("root/file/uploaddata/2017-02-24", file, function(event){
|
btn_select.attr("disabled", true);
|
lbl_progress.html(formatFileSize(event.loaded) + "/" + formatFileSize(event.total));
|
img_progress.css("width", (event.loaded / event.total) * 100 + "%");
|
|
if (event.loaded != event.total) {
|
step_0.html("正在上载，请稍等...");
|
}
|
else {
|
step_0.html("上载完成 .");
|
step_1.html("正在进行后台处理，请稍等...");
|
timer = setInterval(refresh, 2000);
|
}
|
},
|
function(result){
|
btn_select.attr("disabled", false);
|
step_1.html("后台处理完成 .");
|
});
|
}
|
});
|
}
|
|
//手动刷新日志
|
function refresh(){
|
Server.call("root/file/showmessages?notDebug=true", function(result) {
|
var msg = result.arraylist;
|
var str = "";
|
for(var i = 0; i < msg.length; i++){
|
str += '<div class="taskline"><div>' + msg[i] + '</div></div>';
|
}
|
message.empty();
|
message.append(str);
|
});
|
|
if(step_1.text() == "后台处理完成 ." && timer != null){
|
clearInterval(timer);
|
}
|
}
|
|
//////////////////////////拖拽操作////////////////////////////////////
|
function addDragEvent() {
|
|
dropArea.on("dragover", function(e) {//拖来拖去
|
e.preventDefault();
|
});
|
|
dropArea.on("dragenter", function(e) {//拖拽进入
|
e.preventDefault();
|
dropArea.html("请放下文件");
|
});
|
|
dropArea.on("dragleave", function(e) {//拖拽移出
|
e.preventDefault();
|
dropArea.html("将Excel文件拖放到此处");
|
});
|
|
dropArea.on("drop", function(e) {//拖拽释放
|
e.preventDefault();
|
var filelist = e.originalEvent.dataTransfer.files;
|
|
if (filelist.length == 0) {
|
return false;
|
}
|
|
if (filelist[0].name.indexOf('.xlsx') == -1 && filelist[0].name.indexOf('.xls') == -1) {
|
alert("您拖的不是Excel文件！");
|
return false;
|
}
|
|
upload(filelist[0]);
|
dropArea.html("将Excel文件拖放到此处");
|
});
|
}
|
|
//////////////////////////////////////////////
|
$(document).ready(function() {
|
try {
|
//1.
|
fileSelector = $("#fileSelector");
|
edt_fileName = $("#edt_fileName");
|
btn_select = $("#btn_select");
|
|
lbl_fileSize = $("#lbl_fileSize");
|
lbl_progress = $("#lbl_progress");
|
dropArea = $("#dropArea");
|
logdata = $("#logdata");
|
message = $("#message");
|
|
step_0 = $("#step_0");
|
step_1 = $("#step_1");
|
img_progress = $("#img_progress");
|
|
//2.
|
addDragEvent();
|
}
|
finally {
|
Loading.hide();
|
}
|
});
|
</script>
|
</head>
|
|
<body style="overflow: hidden;">
|
|
<div style="margin: 20px; border: 1px #CCC dashed; font-family:微软雅黑;font-size:15px">
|
<div style="margin: 0px 0px 0px 20px; width: 100%">
|
<div style="height: 12px; opacity: 0;" >
|
<input type="file" id="fileSelector" size="120" onchange="onSelectFile()" />
|
</div>
|
|
数据文件:
|
<input type="text" id="edt_fileName" class="text_large" style="width: 435px;" disabled="disabled"></input>
|
<input id="btn_select" type="button" style="width: 100px; margin: 0px 20px 0px 0px;" value="选择" onclick="selectFile()"></input>
|
|
<span>文件大小：</span>
|
<span id="lbl_fileSize">0M</span>
|
<span style="margin-left: 20px;">上传进度：</span>
|
<span id="lbl_progress">0M/0M</span>
|
</div>
|
|
<div id="dropArea" class="dropArea" style="height: 120px;" align="center">
|
将Excel文件拖放到此处
|
</div>
|
<div style="margin: 10px">
|
<div style="float: left; width:200px">当前任务:</div>
|
<progress id="progress" value="50" max="100">
|
<ie id="ie"></ie>
|
</progress>
|
</div>
|
|
<!-- <div style="font-size: 20px; width: 100%; font-family: 微软雅黑 ; color: #69C; font-size: 18px; margin: 20px 0px 10px 10px; padding-left: 10px; ">
|
<div style="float:left;">日志记录</div>
|
<div style="line-height:18px;float:left;border:1px #e5e5e5 solid; width:398px;height:18px;margin:2px 0 0 20px;">
|
<img id="img_progress" style="width:10%;height:18px" src="../../image/progress.jpg"/>
|
</div>
|
<input onclick="refresh();" style="float:left; margin-left:30px;" value="刷新日志" type="button"></input>
|
<div style="clear: both"></div>
|
</div> -->
|
<div style="height: 420px; margin: 0px 10px 20px 10px; font: 16px 微软雅黑; border: 1px #CCC solid;" >
|
<div id="logdata" style="margin-left: 20px; margin-top: 20px ">
|
|
<!-- <div class="taskline">
|
<div style="float: left; width: 200px;">一. 上载数据</div>
|
<div style="float: left; width: 200px;"><label id="step_0"></label></div>
|
<div style="clear: both;"></div>
|
</div>
|
|
<div class="taskline">
|
<div style="float: left; width: 200px;">二. 后台处理</div>
|
<div style="float: left; width: 200px;"><label id="step_1"></label></div>
|
<div style="clear: both;"></div>
|
</div> -->
|
|
<!--动态日志-->
|
<div id="message" style="margin-top:20px"></div>
|
|
</div>
|
</div>
|
</div>
|
</body>
|
</html>
|
