2016年10月27日

雲端硬碟上傳檔案及表單記錄

有個機會,要利用雲端硬碟收檔案,還要把表單記錄下來,找了一些文件,許多只是做到上傳檔案。
參考網址:https://medium.com/@jimmy0816/%E5%A6%82%E4%BD%95%E5%BB%BA%E7%AB%8B%E5%8F%AF%E4%BB%A5%E4%B8%8A%E5%82%B3%E6%AA%94%E6%A1%88%E7%9A%84google%E8%A1%A8%E5%96%AE-how-create-a-file-upload-form-with-google-script-72f019539073#.nrnze43jh

1.首先你要啟用google script

 2.建一個新專案google script,並改名成:上傳檔案表單(請自取名字)
3.gs程式
剛開始是:


清空並,貼上下列程式碼 (程式來源:https://medium.com/@jimmy0816/%E5%A6%82%E4%BD%95%E5%BB%BA%E7%AB%8B%E5%8F%AF%E4%BB%A5%E4%B8%8A%E5%82%B3%E6%AA%94%E6%A1%88%E7%9A%84google%E8%A1%A8%E5%96%AE-how-create-a-file-upload-form-with-google-script-72f019539073#.nrnze43jh)


function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('form.html');
}
function uploadFiles(form) {
  try {
    
    var folderName = "上傳區";   //上傳的資料夾名稱
    var sheetName = "上傳表單";  //上傳的表單名稱
    var folder;
    var folders = DriveApp.getFoldersByName(folderName);
    
    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      //如果資料夾不存在,自動建立
      folder = DriveApp.createFolder(folderName);
    }
    //handling uploading file
    var blob = form.myFile;    
    var file = folder.createFile(blob);    
    file.setDescription("Uploaded by "+ form.myName+" - " + form.myEmail  + "("+ form.myTel +")" );    
    
    var fileUrl = file.getUrl();
    
    //尋找雲端硬碟是否有這個檔案
    var FileIterator = DriveApp.getFilesByName(sheetName);
    var sheetApp = "";
    while (FileIterator.hasNext())
    {
      var sheetFile = FileIterator.next();
      if (sheetFile.getName() == sheetName)
      {
        // 如果有這個資料表就把它打開
        sheetApp = SpreadsheetApp.open(sheetFile);
      }    
    }
//如果沒有就建立一個新的
    if(sheetApp == "")
    {
      sheetApp = SpreadsheetApp.create(sheetName);
    }
    // 讀取第一個sheets找到最後一行
    var sheet = sheetApp.getSheets()[0];
    var lastRow = sheet.getLastRow();
    // 寫入新的資料
    var targetRange = sheet.getRange(lastRow+1, 1, 1, 4).setValues([[form.myName,form.myEmail,form.myTel,fileUrl]]);
    
    return "檔案上傳成功!"
    
  } catch (error) {
    
    return "檔案上傳失敗! 原因:"+error.toString();
  }
  
}

注意你要修改的是:
第二行有一個form.html,這是等一下表單檔名,如果不喜歡,請改名。
var folderName = "上傳區";   //上傳的資料夾名稱
var sheetName = "上傳表單";  //上傳的表單名稱
這一行要特別注意:
var targetRange = sheet.getRange(lastRow+1, 1, 1, 4).setValues([[form.myName,form.myEmail,form.myTel,fileUrl]]); 

sheet.getRange(lastRow+1, 1, 1, 4)是說
method getRange(row, column, optNumRows, optNumColumns) 
如果等一下網頁中的欄位數不同要改4這個數字(看你要記錄幾欄), 改了數字,相對後面的值要跟著改
[[form.myName,form.myEmail,form.myTel,fileUrl]]
它的表示法是在[[]]中加入欄位名以form.欄位名稱,分隔(半形逗號)。
 
4.建一個新的html檔案,檔名要和gs檔中第二行
return HtmlService.createHtmlOutputFromFile('form.html'); 
中的文字相同,這裡是form.html


5.把下列程式碼取代原來的程式碼
原來是這樣:清除全部
貼上程式碼:(程式碼來源:
https://medium.com/@jimmy0816/%E5%A6%82%E4%BD%95%E5%BB%BA%E7%AB%8B%E5%8F%AF%E4%BB%A5%E4%B8%8A%E5%82%B3%E6%AA%94%E6%A1%88%E7%9A%84google%E8%A1%A8%E5%96%AE-how-create-a-file-upload-form-with-google-script-72f019539073#.nrnze43jh

<!DOCTYPE html>
<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<script src="//cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<script>
    function fileUploaded(status) {
       $('form').hide();
       $('#output').html(status);
    }
</script>
<body>
<div class='container'>
 <h1>作業上傳表單</h1>
 <form>
  <fieldset class="form-group">
    <label for="myName">姓名</label>
    <input type="text" name="myName" class="form-control" id="myName" placeholder="請輸入姓名">
  </fieldset>
  <fieldset class="form-group">
    <label for="myEmail">Email</label>
    <input type="email" name="myEmail" class="form-control" id="myEmail" placeholder="請輸入Email">
  </fieldset>
  <fieldset class="form-group">
    <label for="myTel">電話</label>
    <input type="tel" name="myTel" class="form-control" id="myTel" placeholder="請輸入電話">
  </fieldset>
  <fieldset class="form-group">
    <label for="exampleInputFile">File input</label>
    <input name="myFile" type="file" class="form-control-file" id="exampleInputFile">
    <small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
  </fieldset><button type="submit" class="btn btn-primary" onclick="$('#output').html('上傳中...');
                    google.script.run.withSuccessHandler(fileUploaded)
                    .uploadFiles(this.parentNode);
                    return false;">確定送出</button>
 </form>
 <div id="output"></div>
</div>
</body>
</html>
 
注意這裡注意紅字的三個name就是gs檔中的form.名字,這幾個欄位你不一定適用,改變時記得html檔和gs檔都要一起改變。
如果要增加欄位,可以複製程式碼
<fieldset class="form-group">
    <label for="myTel">電話</label>
    <input type="tel" name="myTel" class="form-control" id="myTel" placeholder="請輸入電話">
  </fieldset>
 加以修改(藍色的部分都要修改),至於input形態(文字、數字、下拉選單、radio、...)請多看html5相關文件
個人示範改一個radio的範例
 <fieldset class="form-group">
    <input id="identity1" type="radio" name="identity" value="教師" class="form-control"  aria-required="false">教師
    <input  id="identity2" type="radio" name="identity" value="義工" class="form-control"  aria-required="false">義工
 </fieldset> 
 
6.取得程式權限(記得要存檔),點選程式碼.gs,執行/doGet,這時要同意權限。

 
 
7.發佈程式,發佈/佈署為網路應用程式。

 
 
8.這個script專案有版本號,管理在:


 9.使用者填完表單,就會在雲端硬碟中出現。



張貼留言