<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet"  type="text/css" href="${ctx}/css/indexNew/base.css" />
<link rel="stylesheet"  type="text/css" href="${ctx}/css/indexNew/all.css" />
<link rel="stylesheet"  type="text/css" href="${ctx}/css/indexNew/perfect-scrollbar.css" />
<title>知识图谱平台</title>
<style>
	*{
		box-sizing: border-box;
	}
</style>
</head>
<body class="bg1">
<div class="headCon">
	<div class="headCon">
		<jsp:include page="../top.jsp">
		<jsp:param name="index" value="1" />
		</jsp:include>
	</div>
</div>
<div class="searchCon">
	<div class="sunNavCom">
		<div class="subNavForDS">
			<p class="subNavForDSHead">数据导入</p>
			<span class="subNavForDSSubHead">请选择文件类型</span>
			<ul>
				<li><i class="excel"></i>Excel</li>
				<li><i class="text"></i>文本文件</li>
				<li><i class="stats"></i>统计文件</li>
			</ul>
			<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" multiple hidden/>
		</div>
	</div>
	<div class="DShistoryCon">
		<p>已保存数据</p>
		<div class="DShistory">
			<ul>
				<li>海南人口统计</li>
				<li>海南人口统计</li>
			</ul>
		</div>
	</div>
</div>
<div class="main" id="main" style="position:relative;padding-bottom: 12px;padding-right: 22px;">
	<div class="DSOpen">
		<p>打开</p>
		<ul id="DSList">
			
		</ul>
	</div>
</div>

<script type="text/html" id="DSList_template"> 
<!for(var i=0;i<data.length;i++){!>
			<li>
				<div class="DSItem">
					<img src="${ctx}/images/indexNew/33.png">
				</div>
				<span><!=data[i]!></span>
			</li>
<!}!>
</script>

<script src="${ctx}/js/lib/jquery-1.11.1.min.js"></script>
<script src="${ctx}/js/lib/core.js"></script>
<script src="${ctx}/js/lib/baiduTemplate.js"></script>
<script src="${ctx}/js/lib/perfect-scrollbar.jquery.js"></script>
<script>
	resize();
	$(window).resize(function(){
		resize();
	});
	function resize(){
		//获取窗口高度
		var windowheight=$(window).height();
		var searchCon = windowheight-40-146;
		$(".searchCon").css("height",windowheight-40);
		$(".main").css("height",windowheight-40-12-12);
	}
	//perfect-scrollbar滚动条插件
	$('#main').perfectScrollbar();

	//
	$(".subNavForDS ul").delegate("li","click",function(){
		$("#fileToUpload").click();
	});
	$("#DSList").delegate("li","click",function(){
		uploadFiles();
	});
	
	function fileSelected(){
		var files = document.getElementById('fileToUpload').files;
		var filesData = {
				data:[]
		};
		for(var i=0;i<files.length;i++){
			if(allFilesName.indexOf(files[i].name)<0){
				allFilesName.push(files[i].name);
				allFiles.push(files[i]);
			}
			/*
			filesData.data.push({
				name:files[i].name,
			});
			*/
			//var file = files[i];
			//fd.append("fileToUpload", file);
		}
		var ht = baidu.template("DSList_template",{data:allFilesName});
		$("#DSList").html(ht);
	}
	var allFiles = [];
	var allFilesName = [];
	
	function uploadFiles(){	
		// window.location.href="/KnowledgeGraph/KG/connectDS.do";
		
		var fd = new FormData();
		for(var i=0;i<allFiles.length;i++){
			fd.append("fileToUpload", allFiles[i]);
		}
        var xhr = new XMLHttpRequest();
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCanceled, false);
		xhr.open("POST", "/KnowledgeGraph/KG/uploadFile.do");
        xhr.send(fd);
      }

      function uploadComplete(evt) {
        //alert(evt.target.responseText);
    	window.location.href="/KnowledgeGraph/KG/connectDS.do";
      }

      function uploadFailed(evt) {
        alert("There was an error attempting to upload the file.");
      }

      function uploadCanceled(evt) {
        alert("The upload has been canceled by the user or the browser dropped the connection.");
      }
</script>
<script type="text/javascript">/*
      function fileSelected() {
        var file = document.getElementById('fileToUpload').files[0];
        if (file) {
          var fileSize = 0;
          if (file.size > 1024 * 1024)
            fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
          else
            fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

          document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
          document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
          document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
        }
		console.log(file);
      }

      function uploadFile() {
        var fd = new FormData();
        fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCanceled, false);
        console.log(fd);
		xhr.open("POST", "/KnowledgeGraph/KG/uploadFile.do");
        xhr.send(fd);
      }

      function uploadProgress(evt) {
        if (evt.lengthComputable) {
          var percentComplete = Math.round(evt.loaded * 100 / evt.total);
          document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
        }
        else {
          document.getElementById('progressNumber').innerHTML = 'unable to compute';
        }
      }

      function uploadComplete(evt) {
        alert(evt.target.responseText);
      }

      function uploadFailed(evt) {
        alert("There was an error attempting to upload the file.");
      }

      function uploadCanceled(evt) {
        alert("The upload has been canceled by the user or the browser dropped the connection.");
      }
      */
    </script>
</body>
</html>