Gg / 透過Google Apps Script 建立上傳檔案頁面

  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

<style>
#content {
  width :800px;
  margin:10px auto;
  align-items: center;
  justify-content:  center;
}
#layout{
  display:  none;
  position: relative;
  text-align: center;
  padding:10px;
  border: 2px solid #FF0000;
  //width: 520px;
  height: 450px;
}
#send {
  color: green;
}
.notie{
  color:blue;  
}
#output{
  padding-top:5px;
  color:red;
}
#output2{
  position: absolute;
  width:220px;
  height:50px;
  display:none;
  background-color:#DBABFF;
  //bottom:45px;
  left:280px;
  font-size: 10px;
  padding-top:2px;
  border-radius:10px;
  animation-name: MoveToUp;    /*動畫名稱，需與 keyframe 名稱對應*/
  animation-duration: 4s;      /*動畫持續時間，單位為秒*/
  animation-delay: 0s;         /*動畫延遲開始時間*/
  //animation-iteration-count: infinite;    /*動畫次數，infinite 為無限次*/ 
  animation-fill-mode: forwards;   
}
/* 關鍵影格(@keyframe) */
@keyframes MoveToUp {
    from { bottom: 0px; }
    to { bottom: 45px; }
}
#fileList {
  //display:  none;
  //display:  flex;
  width :1000px;
  margin:10px auto;
  align-items: center;
  justify-content:  center;
}
.table,.table * {
      padding: 5px;
      font-size: 12px;
      font-family: "Noto Sans CJK TC", "Microsoft JhengHei", PingFang, STHeiti, sans-serif, serif;
}
.table {
      display: table;
      width: 100%;
      border-collapse: collapse;
}
.table-tr {
      display: table-row;
      height: 30px;
}
.table-th {
      display: table-cell;
      font-weight: bold;
      height: 100%;
      border: 1px solid gray;
      text-align: center;
      vertical-align: middle;
      background-color: #E5E5E5;
}
.table-td {
      display: table-cell;
      height: 100%;
      border: 1px solid gray;
      text-align: start;
      vertical-align: middle;
      padding-left: 4px;
}
#showLayout {
  display:none;  
}
#offLayout {
  display:none;  
}
#wait {
  display:block;  
}
.notie{
  color:blue;  
}
#f5 {
  display:none;  
}
</style>

  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
129
130
131
132
133
134
135
136
137
138
139
140
141
142

<script>
  var dateReviver = function (key, value) {
  //將日期字串轉為日期資料型態
  //console.log("key", key);
  //console.log("value", value);
  var a;
  if (typeof value === "string") {
    a = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value); //比對是否符合日期型態
    //console.log(a);
    if (a) {
      var dataString = new Date(
          Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4], +a[5], +a[6]) //使用+符號 將文字形數字轉為數值類型
      );
      //console.log("dataString", dataString);
      var weekday = new Array(6);
      weekday[0] = "日";
      weekday[1] = "一";
      weekday[2] = "二";
      weekday[3] = "三";
      weekday[4] = "四";
      weekday[5] = "五";
      weekday[6] = "六";
      var hour = dataString.getHours();
      var min = dataString.getMinutes();
      var sec = dataString.getSeconds();
      // 轉成字串，如果低於10，前面加上'0'
      var hourString = hour < 10 ? "0" + hour : "" + hour;
      var minString = min < 10 ? "0" + min : "" + min;
      var secString = sec < 10 ? "0" + sec : "" + sec;
      var formatted_date =
        dataString.getFullYear() +
        "/" +
        (dataString.getMonth() + 1) +
        "/" +
        dataString.getDate() +
        "(" +
        weekday[dataString.getDay()] +
        ")" +
        " " +
        hourString +
        ":" +
        minString +
        ":" +
        secString;
      return formatted_date;
    }
  }
  return value;
}
//
  var option={
    animation:true,
    delay:5000,
  }  
  //option其實是物件
    
  var toastElList = [].slice.call(document.querySelectorAll('.toast'))
  var toastList = toastElList.map(function (toastEl) {
    return new bootstrap.Toast(toastEl, option)
  })
  //

function onStart(e){
  //console.log("onStart");
  //console.log(e);
  //console.log("onStart");
  var msg = JSON.parse(JSON.stringify(e, dateReviver));
  var html="";
  html += '<div class="table"><div class="table-tr">';
  //取出標題
  for (var k = 0; k < msg[1].length; k++) {
        html +=
          '<div class="table-th">' +
          msg[1][k] +
          "</div>";
      }
  html += "</div>";
  //取出內容    
  for(var i = 2; i < msg.length ; i++){
    html += '<div class="table-tr">'; //
    for(var j = 0; j < msg[2].length ; j++){
        html += '<div class="table-td">' +msg[i][j] +  "</div>";
    }
    html += "</div>";
  }
  document.getElementById('fileList').innerHTML = html;
  document.getElementById("showLayout").style.display='block';;
  document.getElementById("wait").style.display='none';;
}
  //
function fileUploaded(status) {
  var msg = JSON.parse(JSON.stringify(status, dateReviver));
  //console.log(msg);
  //console.log(msg[0]);
  //console.log(msg[1]);
  //console.log(msg[2]);
  //console.log(msg[3]);
  
  var html="";    
  
  if (msg[0]!=="檔案上傳成功！"){
      document.getElementById('send').value = "重新上傳作業";
      document.getElementById('send').disabled = false;
      document.getElementById('output').innerHTML += msg;  //上傳失敗 msg只會有一個字串資料
      //document.getElementById('output2').style.display = 'block';
      //document.getElementById('output2').innerHTML = msg;
      //document.getElementById('output3').innerHTML = msg+"<br><span>請確認資料</span>";
      //showToast();      
    }else{
      document.getElementById('upload').style.display = 'none';
      //document.getElementById('layout').style.height = '200px';
      document.getElementById('output').innerHTML += msg[0] +"</br><span class='notie'>如果需要新增檔案，請重新整理網頁!!</span></br>";
      document.getElementById('output2').style.display = 'none'; 
      document.getElementById('fileList').style.display = 'block';
      document.getElementById('f5').style.display = 'block'; //內嵌 不能使用
      
      html += '<div class="table"><div class="table-tr">';
      //取出標題
      for (var k = 0; k < msg[1].length; k++) {
            html +=
              '<div class="table-th">' +
              msg[1][k] +
              "</div>";
      }
      html += "</div>";
      //取出內容    
      for(var i = 2; i < msg.length ; i++){
        html += '<div class="table-tr">'; //
        for(var j = 0; j < msg[2].length ; j++){
            html += '<div class="table-td">' +msg[i][j] +  "</div>";
        }
        html += "</div>";
      }
      document.getElementById('fileList').innerHTML = html;
    }  
  }
function showToast(){
  for( var i=0;i<toastList.length;i++){
    toastList[i].show();}
    return false;
  }
</script>