TC
/
3DPRCU


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
							<html>
<head>
<meta charset="utf-8" /> 
<script src="jquery.js"></script>
<link rel="stylesheet" href="css/tocas.css">
<title>Upload Interface</title>
<script src="jquery.js"></script>
</head>
<body>
<br><br>
<div class="ts container">
	<div class="ts slate">
		<span class="header">上傳 Gcode</span>
		<span class="description">本頁面是以手動方式上傳 Gcode 的界面。雖然能用，但是配合著雲端界面使用的話會更方便就是了。</span>
	</div>
	<div class="ts horizontal form">
	<div class="field">
		<label>選擇上載文件</label>
		<input id="fileSelector" type="file"></input>
	</div>
	<div class="field">
        <label>上載檔名</label>
        <input id="path" type="text" placeholder="filename to be uploaded (with file extension)">
		<small>注：必須包含副檔名</small>
    </div>
	</div>
	<br>
	<button class="ts primary button" onClick="uploadFile();">Click Me To Upload</button>
	<button class="ts basic button" onClick="loadFileList();">Refresh FileList</button>
	<div class="ts segment">
		<div>上載資料夾檔案列表</div>
		<div id="fileList">
			
		</div>
		</div>
</div>
<div id="activeDimmer" class="ts active dimmer" style="display:none;">
        <div class="ts text loader">Uploading<br>This might take a while...</div>
    </div>
<script>
loadFileList();

$('#fileSelector').change(function(e){
	var fullfilepath = $("#fileSelector").val();
	var tmp = (fullfilepath.split("\\").join("/")).split("/");
	var filename = tmp.pop();
	$("#path").val(filename);
});

var progress = 0;
function uploadFile(){
  $("#activeDimmer").show();
  var input = $("#fileSelector")[0];
  var path = $("#path")[0];
  if(input.files.length === 0){
	return;
  }
  xmlHttp = new XMLHttpRequest();
  var formData = new FormData();
  formData.append("data", input.files[0], "/web/upload/" + path.value);
  xmlHttp.open("POST", "/upload");
  xmlHttp.upload.onprogress = function (e) {
		if (e.lengthComputable) {
			progress = parseInt(e.loaded / e.total);
		}
	}
	xmlHttp.upload.onloadstart = function (e) {
		progress = 0;
	}
	xmlHttp.upload.onloadend = function (e) {
		progress = parseInt(e.loaded / e.total);
		window.location.reload();
	}
  xmlHttp.send(formData);
}

function loadFileList(){
	$("#fileList").html("");
	$.get("/list?dir=/web/upload",function(data){
		for(var i = 0; i < data.length; i++){
			if (data[i]["type"] == "file"){
				//This is file
				$("#fileList").append('<a href="' + data[i]["name"] + '" target="_blank">' + "<i class='file outline icon'></i>" + basename(data[i]["name"]) + "</a><br>");
			}else{
				//This is dir
				$("#fileList").append('<a href="' + data[i]["name"] + '" target="_blank">' + "<i class='folder open outline icon'></i>" + basename(data[i]["name"]) + "</a><br>");
			}
			
		}
	});
}

function basename(fullpath){
	var tmp = fullpath.split("/");
	var filename = tmp.pop();
	return filename;
}
</script>
</body>
</html>