diff --git a/form/index.html b/form/index.html index e738d5c26d055ede41daeb3f4a8832f3d1c5bd2e..47e0c647cd42e0f8dcc65c84660ed0ed9e1a48b0 100644 --- a/form/index.html +++ b/form/index.html @@ -16,9 +16,32 @@ position: absolute; top: 0; left: 0; - width: 65%; + 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> @@ -26,6 +49,10 @@ <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> @@ -45,9 +72,57 @@ 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> \ No newline at end of file