<%@ 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">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>3D編輯器</title>
</head>
<body>
導入本地檔案：<input type="file" name="file" id="importFile" webkitdirectory />
導出本地檔案：<input type="button" value="導出" id="exportFile"/>
<script src="${ctx}/static/js/FileSaver.js"></script>
<script>
var temp;
var paths = {
"m":[],
"mat":[],
"sky":{},
"ao":'',
"a":[]
};
var input = document.getElementById("importFile");
input.onchange=function(){
//console.log(this.files);
var fileList = this.files;
uploadMulFile(fileList);
/**var file = this.files[0];
if(file){//單個檔案的讀取
var reader = new FileReader();
reader.readAsText(file,"UTF-8");
reader.onload=function(){
temp = this.result;
console.log(temp);
var jsonData = JSON.parse(temp);
console.log(jsonData);
}
}**/
}
//多個檔案一個一個讀
function uploadMulFile(uploadFile) {
var fileLength = 0;
var reader = new FileReader();
if ( uploadFile[fileLength].type.match( 'image.*' ) ) {
reader.readAsDataURL(uploadFile[fileLength]);
} else {
reader.readAsText(uploadFile[fileLength],"UTF-8");
}
//reader.readAsText(uploadFile[fileLength],"UTF-8");
reader.onabort = function(e) {
console.log("檔案讀取異常" + uploadFile[fileLength].name);
};
reader.onerror = function(e) {
console.log("檔案讀取出現錯誤" + uploadFile[fileLength].name);
};
reader.onload = function(e) {
if(e.target.result) {
console.log("完成" + uploadFile[fileLength].name+" 路徑為："+uploadFile[fileLength].webkitRelativePath);
// console.log(e.target.result);//這是結果
fileLength++;
if(fileLength < uploadFile.length) {
if ( uploadFile[fileLength].type.match( 'image.*' ) ) {
reader.readAsDataURL(uploadFile[fileLength]);//讀圖檔
} else {
reader.readAsText(uploadFile[fileLength],"UTF-8");//讀文本
}
} else {
//do something
console.log('本地檔案已經全部讀取完畢'+typeof(paths));
console.log(JSON.stringify(paths));
// console.log(JSON.parse(paths));
}
}
};
}
//導出為json檔案
var button = document.getElementById("exportFile");
button.addEventListener("click", saveHandler, false);
function saveHandler(){
let data = {
name:"hanmeimei",
age:88
}
var content = JSON.stringify(data);
var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
saveAs(blob, "save.json");
}
</script>
</body>
</html>
附上FileSave.js
連結: https://pan.baidu.com/s/1Tw1ZkBbLNq6O_H7trXNwlQ 提取碼: peww
![怎樣使用SpringMVC控制頁面[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)