莊生趣味 » Gg / 透過Google Apps Script 建立上傳檔案頁面

Post Views: 1,142

2.formHtml

#7 <?!= include(‘style.css’); ?>載入自訂的css

#8~11 載入Bootstrap的js、css檔案

#15~57 查詢頁面

#58 <?!= include(‘script.js’); ?>載入自訂的script

這裡的函式主要是接收後端傳回的資料並處理

#59~181 自定義的function

這裡的函式主要是處理頁面表單的資料，以及將資料傳到後端

比較需要說明的是當觸發”上傳檔案”(#67~148)，會先檢驗表單內容是否有資料

如果有遺漏就會終止程序並顯示錯誤訊息

沒有遺漏值就會接著上傳檔案的流程

會先判斷檔案數量再分別執行對應的程式

1個檔案：google.script.run.withSuccessHandler(fileUploaded).uploadFile(this.parentNode);

2個檔案以上：google.script.run.withSuccessHandler(fileUploaded).moreFiles(obj);

其實可以用2個檔案以上的程序來處理1個檔案，這樣程式碼可以更為精簡

<!doctype html>
<html lang="zh-Hant">
  <head>
     <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <?!= include('style.css'); ?>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
   <base target="_top">
  </head>
  <body>
    <div id="content">
      <div id="wait">請稍後...</div>
      <div id="bardiv">
        <input class="form-control" type="button" name="button1"  id="showLayout" value="上傳檔案">
        <input class="form-control" type="button" name="button2"  id="offLayout" value="關閉">
      </div>
      <p>
      <div id="layout">
          <h1>第一組研發資料上傳</h1>
          <form id="upload">
            <div class="input-group mb-3">
              <label class="input-group-text" for="id" class="form-label">請輸入你的姓名：</label>
              <input class="form-control" type="text" name="id" id="fId" placeholder="姓名" tabindex="1">
            </div>
            <!--<div class="input-group mb-3">
              <label class="input-group-text" for="phone" class="form-label">請輸入你的手機電話：</label>
              <input class="form-control" type="text" name="phone" id="fPhone" placeholder="0912-123-456" tabindex="2">
            </div>-->
            <!--<div class="input-group mb-3">
              <label class="input-group-text" for="email" class="form-label">請輸入你的Email：</label>
              <input class="form-control" type="text" name="email" id="fEmail" placeholder="123@abc.com" tabindex="3">
            </div>-->
            <div class="input-group mb-3">
              <input class="form-control" type="file" name="uploadFile" id="fFile" multiple>
            </div>
            <input id="send" class="form-control" type="submit" value="上傳檔案">
          </form>
          <div id="output"></div>
          <!--<input class="form-control" type="button" name="button3" id="f5" onclick="ftnOn()" value="重新整理">-->
          <input class="form-control" type="button" name="button3" id="f5" value="重新整理"><!-- 監聽事件 -->
          <div id="output2"></div>
          <div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
              <div id="output3" class="toast-body"></div>
              <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
          </div>
      </div>
   </div>
   <p>
   <div id="fileList">    
   </div>
  </body>
  <?!= include('script.js'); ?>
  <script>
    //寫出目前的資料
    function init() {
      google.script.run.withSuccessHandler(onStart).getInt(1);
    }
    //觸發監控 當DOMContentLoaded執行 function init()
    document.addEventListener("DOMContentLoaded", init);
    //
    var btn = document.getElementById("send");  
    btn.addEventListener("click", function(e){
      //
      btn.disabled = true;
      document.getElementById('output').innerHTML = "";
      var fId = document.getElementById("fId").value;
      //var fPhone = document.getElementById("fPhone").value;
      //var fEmail = document.getElementById("fEmail").value;
      var fFile = document.getElementById("fFile").value;
      //console.log(fId);
      //console.log(fPhone);
      //console.log(fEmail);
      //console.log(document.getElementById("fFile").files[0]);
      //console.log(document.getElementById("fFile").files[1]);
      
      var e1="";      
      //console.log("------------------");
      if(fId == ""){
        e1 += "<span class='notie'>請輸入姓名</span></br>";
      }
      /*
      fPhone = fPhone.replace(/\s+/g, ",");
      var reM = /09\d{2}-\d{3}-\d{3}/;
      var foundM = fPhone.match(reM);
      //console.log(foundM);

      if(foundM == null){
        e1 += "<span class='notie'>請輸入正確電話格式</span></br>";
      }      
      //console.log(e1);
      //
      fEmail = fEmail.replace(/\s+/g, ",");
      var reE = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/;
      var foundE = fEmail.match(reE);      
      if(foundE == null){
        e1 += "<span class='notie'>請輸入正確電子信箱格式</span></br>";
      }
      //console.log(fFile);
      */

      if(fFile ==""){
        e1 += "<span class='notie'>請選擇檔案</span></br>";
      }
      
      if(e1 !=""){        
        document.getElementById('output').innerHTML = e1;
        btn.disabled = false;
      }else{
        this.value='上傳中...'; 
        //console.log(this.parentNode);
        //
        //google.script.run.withSuccessHandler(fileUploaded).uploadFile(this.parentNode);
        var f = document.getElementById('fFile');
        var fNum = f.files.length;
        //console.log(f.files.length);
        if(fNum ==1){
          //1個檔案
          console.log("this.parentNode");
          console.log(this.parentNode);
          console.log("this.parentNode");
          google.script.run.withSuccessHandler(fileUploaded).uploadFile(this.parentNode);

        } else {
            //兩個以上檔案
            //console.log(f.files.length);
            [...f.files].forEach((file, i) => { //[...Array] ES6 Spread Syntax 陣列展開語法  ps.物件{...object}
              var fr = new FileReader();
              fr.onload = (e) => {
                var data = e.target.result.split(",");
                var obj = {userName: fId ,fileName: f.files[i].name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]};
                console.log("obj");
                console.log(obj);
                console.log("obj");
                google.script.run.withSuccessHandler(fileUploaded).moreFiles(obj);
              }
            fr.readAsDataURL(file);
          });
        }
        //
      }
        e.preventDefault();
      }, false); 
    //
    var stn = document.getElementById("showLayout");
    stn.addEventListener("click", function(e){      
      document.getElementById("layout").style.display='block';
      stn.style.display='none';
      otn.style.display='block';
      e.preventDefault();
    }, false); 
    //
    var otn = document.getElementById("offLayout");
    otn.addEventListener("click", function(e){      
      document.getElementById("layout").style.display='none';
      stn.style.display='block';
      otn.style.display='none';
      e.preventDefault();
    }, false); 
    
    //重新整理網頁
    //嵌入網頁 不能使用
    var ftn = document.getElementById("f5");
    ftn.addEventListener("click", function(e){    
      ftn.disabled = true;
      google.script.run.withSuccessHandler(function(url){window.open(url,'_top');}).getScriptURL();
      e.preventDefault();
    }, false); 
    //
    /*  
    //嵌入網頁 使用 onclick 不能使用
    function ftnOn(){
        google.script.run.withSuccessHandler(function(url){window.open(url,'_top');}).getScriptURL();
    }
    */ 
  </script> 
</html>

一	二	三	四	五	六	日
		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