亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Google表格文件上傳完整示例

Google表格文件上傳完整示例

慕蓋茨4494581 2019-10-06 15:02:30
如何允許查看者使用Google表單將某些文件上傳到我的表單并將其保存到我的Google云端硬盤?我正在尋找一個完整的示例:它必須告訴要添加到示例Google Form HTML源代碼中的代碼。如何使用Google Apps腳本將查看器的文件上傳到我的Google云端硬盤帳戶?
查看完整描述

3 回答

?
縹緲止盈

TA貢獻2041條經驗 獲得超4個贊

更新:Google表單現在可以上傳文件。在Google表單可以上傳文件之前發布了此答案。


此解決方案不使用Google表單。這是一個使用Apps Script Web App的示例,它與Google表單非常不同。Web App本質上是一個網站,但您無法為其獲取域名。這不是Google表單的修改,無法上傳文件。


注意:我確實有一個同時包含UI服務和HTML服務的示例,但是由于不推薦使用UI服務,因此刪除了UI服務示例。


注意:現在只有唯一的沙箱設置IFRAME。我想onsubmit在開始的表單標簽中使用屬性:  <form onsubmit="myFunctionName()">,這可能導致表單提交后從屏幕上消失。


如果您使用的是NATIVE模式,則文件上傳Web App可能不再起作用。使用NATIVE模式時,表單提交不會調用頁面從屏幕上消失的默認行為。如果您使用的是NATIVE模式,則文件上載表單不再起作用,那么您可能正在使用“提交”類型的按鈕。我猜測您可能還會使用“ google.script.run”客戶端API將數據發送到服務器。如果您希望頁面在提交表單后從屏幕上消失,則可以采用另一種方法。但是您可能不在乎,甚至不希望頁面停留在屏幕上。根據您的需要,您將需要配置設置并以某種方式編碼。


如果您使用的是“提交”類型的按鈕,并且想要繼續使用它,則可以嘗試event.preventDefault();在提交事件處理函數中添加到代碼中。否則,您將需要使用google.script.run客戶端API。


可以使用Apps腳本HTML服務創建用于將文件從用戶計算機驅動器上載到Google云端硬盤的自定義表單。這個例子需要編寫一個程序,但是我在這里提供了所有基本代碼。


本示例顯示了帶有Google Apps腳本HTML服務的上傳表單。


你需要什么

Google帳號

Google云端硬碟

Google Apps腳本-也稱為Google腳本

Google Apps腳本


結束Google Apps腳本代碼編輯器的方法有很多種。


直接從以下網址加載App腳本:https: //script.google.com

首先打開Google表格,然后打開Apps腳本

轉到您的Google云端硬盤,然后打開“應用程序腳本”:https : //drive.google.com/drive/#my-drive

轉到您的Google云端硬盤,然后單擊Apps Script項目文件

Google文檔中的Open Apps腳本

等等

我之所以這樣說是因為,如果您不了解所有可能性,那么可能會有些混亂。Google Apps腳本可以嵌入Google網站,表格,文檔或表單中,也可以作為獨立應用程序使用。


Apps腳本概述


此示例是帶有HTML Service的“獨立”應用程序。


HTML服務-使用HTML,CSS和Javascript創建Web應用


Google Apps腳本的內僅包含兩種類型的文件Project:


腳本

的HTML

腳本文件具有.gs擴展名。該.gs代碼是用JavaScript編寫的服務器端代碼,是Google自己的API的組合。


復制并粘貼以下代碼

保存

創建第一個命名版本

發布它

設置權限


您就可以開始使用它了。


開始于:

在Apps腳本中創建一個新的空白項目

復制并粘貼以下代碼:

使用HTML服務上傳文件:

Code.gs文件(默認創建)


//For this to work, you need a folder in your Google drive named:

// 'For Web Hosting'

// or change the hard coded folder name to the name of the folder

// you want the file written to


function doGet(e) {

  return HtmlService.createTemplateFromFile('Form')

    .evaluate() // evaluate MUST come before setting the Sandbox mode

    .setTitle('Name To Appear in Browser Tab')

    .setSandboxMode();//Defaults to IFRAME which is now the only mode available

}


function processForm(theForm) {

  var fileBlob = theForm.picToLoad;


  Logger.log("fileBlob Name: " + fileBlob.getName())

  Logger.log("fileBlob type: " + fileBlob.getContentType())

  Logger.log('fileBlob: ' + fileBlob);


  var fldrSssn = DriveApp.getFolderById(Your Folder ID);

    fldrSssn.createFile(fileBlob);


  return true;

}

創建一個html文件:


<!DOCTYPE html>

<html>

  <head>

    <base target="_top">

  </head>

  <body>

    <h1 id="main-heading">Main Heading</h1>

    <br/>

    <div id="formDiv">


      <form id="myForm">


        <input name="picToLoad" type="file" /><br/>

        <input type="button" value="Submit" onclick="picUploadJs(this.parentNode)" />


      </form>

    </div>



  <div id="status" style="display: none">

  <!-- div will be filled with innerHTML after form submission. -->

  Uploading. Please wait...

</div>


</body>

<script>


function picUploadJs(frmData) {


  document.getElementById('status').style.display = 'inline';


  google.script.run

    .withSuccessHandler(updateOutput)

    .processForm(frmData)

};

  // Javascript function called by "submit" button handler,

  // to show results.


  function updateOutput() {


    var outputDiv = document.getElementById('status');

    outputDiv.innerHTML = "The File was UPLOADED!";

  }


</script>

</html>

這是一個完整的工作示例。它只有兩個按鈕和一個<div>元素,因此在屏幕上看不到太多。如果.gs腳本成功,則返回true,然后onSuccess運行函數。onSuccess函數(updateOutput)將內部HTML div消息“消息已上傳!” 注入元素。


保存文件,為項目命名

使用菜單:File,Manage Version然后保存第一個版本

Publish,Deploy As Web App 然后更新

第一次運行腳本時,它將要求權限,因為它將文件保存到驅動器中。首次授予權限后,Apps腳本將停止,并且不會完全運行。因此,您需要再次運行它。第一次后,該腳本將不再要求權限。


Apps腳本文件將顯示在您的Google云端硬盤中。在Google云端硬盤中,您可以為有權訪問和使用腳本的人員設置權限。通過簡單地向用戶提供鏈接來運行腳本。就像加載網頁一樣使用鏈接。


在StackOverflow的以下鏈接中可以看到使用HTML服務的另一個示例:


使用HTML服務上傳文件


關于過時的UI服務的注意事項:


UI服務與getUi()Spreadsheet類(或其他類)的Ui 方法之間存在差異。AppsScript UI服務已于2014年12月11日棄用。它將繼續工作一段時間,但是您鼓勵使用HTML服務。


Google文檔-UI服務


即使UI服務被棄用,有一個getUi()電子表格類添加的方法自定義菜單,這是不棄用:


電子表格類-獲取UI方法


我之所以提及這一點,是因為它們都使用術語UI可能會造成混淆。


UI方法返回一個Ui返回類型。


您可以添加HTML的UI服務,但你不能使用<button>,<input>或<script>與UI服務的HTML標簽。


查看完整回答
反對 回復 2019-10-06
  • 3 回答
  • 0 關注
  • 1278 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號