From ec775f99bd805f09160210911872289f3ced63ac Mon Sep 17 00:00:00 2001
From: liujiangnan <695541723@qq.com>
Date: Sun, 28 Nov 2021 00:22:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B9=E4=BE=BF=E7=9A=84JSON?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 form/index.html | 77 ++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 76 insertions(+), 1 deletion(-)

diff --git a/form/index.html b/form/index.html
index e738d5c..47e0c64 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
-- 
2.21.0