<!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>