1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NgOne</title>
<!-- <base href="/"> -->
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="//staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script>
<style>
#saveDataTextarea {
margin: 0;
position: absolute;
top: 0;
left: 0;
right: 180px;
height: 100%;
}
.upload-container {
width: 100px;
height: 40px;
position: absolute;
right: 40px;
border-radius: 2px;
border: 1px solid #dcdfe6;
line-height: 100px;
margin: 10px;
text-align: center;
display:flex;
align-items:center;
justify-content:center;
}
.hide-fileinput {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
</style>
</head>
<body onload="loadData();" style="background-color: white;">
<pre id="saveDataTextarea"></pre>
<div class="upload-container">
<div class="upload-file">上传文件</div>
<input class="hide-fileinput" type="file" name="file" onchange="uploadFile()">
</div>
</body>
<script>
var editor = ace.edit("saveDataTextarea");
editor.setTheme("ace/theme/chrome");
editor.session.setMode("ace/mode/json");
editor.session.on('change', function(delta) {
try {
const data = JSON.parse(editor.getValue());
window.courseware.setData(data, null, "cocos_001");
} catch (error) {}
});
let saveDataStr = '';
function loadData() {
window.courseware.getData((data) => {
try {
editor.setValue(JSON.stringify(data, null, 2));
editor.gotoLine(editor.session.getLength());
} catch (error) {}
}, "cocos_001");
}
function uploadFile(){
const dom = document.querySelector(".hide-fileinput");
const file = dom.files[0];
dom.setAttribute("disabled", true);
document.querySelector(".upload-file").innerHTML = "上传中...";
commonUploadFile(file, (data) => {
try {
const d = JSON.parse(data);
const protocolStr = document.location.protocol;
const url = d.url
.replace(/http:/g, protocolStr)
.replace(/https:/g, protocolStr);
editor.insert(url);
} catch (error) {}
dom.removeAttribute("disabled");
document.querySelector(".upload-file").innerHTML = "上传文件";
});
}
function commonUploadFile(file, callback) {
const uploadUrl = window.courseware.uploadUrl(); //上传文件的路径
const uploadData = window.courseware.uploadData(); //上传文件必须要的参数
const formData = new FormData();
formData.append("file", file);
for (const key in uploadData) {
formData.append(key, uploadData[key]);
}
var xhr = new XMLHttpRequest();
xhr.open("post",uploadUrl);
//回调
xhr.onreadystatechange = function () {
if (xhr.readyState==4 && xhr.status==200){
callback && callback(xhr.responseText);
}
}
//获取上传的进度
xhr.upload.onprogress = function (event) {
if(event.lengthComputable){
var percent = event.loaded/event.total *100;
document.querySelector(".upload-file").innerHTML = Math.floor(percent)+"%";
}
}
//将formdata上传
xhr.send(formData);
}
</script>
</html>