你需要什么

Question

如何让观众使用Google表格将某些文件上传到我的表单并将其保存到我的Google云端硬盘？

我正在寻找一个完整的示例：它必须告诉要添加到示例Google Form HTML源代码的代码。如何使用Google Apps脚本将查看者的文件上传到我的Google云端硬盘帐户？

Answer 1

更新：Google表单现在可以上传文件。此答案是在Google表单具有上传文件功能之前发布的。

此解决方案不使用Google表单。这是使用Apps脚本Web应用程序的一个示例，它与Google表单非常不同。 Web应用程序基本上是一个网站，但您无法为其获取域名。这不是Google表单的修改，无法上传文件。

注意：我确实有一个两者 UI服务和HTML服务的示例，但已删除了UI服务示例，因为不推荐使用UI服务。

注意：现在唯一可用的沙箱设置为IFRAME。我想在开始表单标记onsubmit中使用<form onsubmit="myFunctionName()">属性，这可能会导致表单在表单提交后从屏幕上消失。

如果您使用的是NATIVE模式，则文件上传Web App可能不再有效。使用NATIVE模式，表单提交不会调用页面从屏幕上消失的默认行为。如果您使用的是NATIVE模式，并且您的文件上传表单不再有效，那么您可能正在使用＆＃34;提交＆＃34;键入按钮。我猜你也可能正在使用＆＃34; google.script.run＆＃34;客户端API将数据发送到服务器。如果您希望在提交表单后页面从屏幕上消失，您可以采用其他方式。但你可能不在乎，甚至更喜欢让页面停留在屏幕上。根据您的需要，您需要以某种方式配置设置和代码。

如果您正在使用＆＃34;提交＆＃34;键入按钮，并希望继续使用它，您可以尝试将event.preventDefault();添加到提交事件处理函数中的代码中。或者您需要使用google.script.run客户端API。

可以使用Apps脚本HTML服务创建用于将文件从用户计算机驱动器上传到Google云端硬盘的自定义表单。这个例子需要编写程序，但我在这里提供了所有的基本代码。

此示例显示了使用Google Apps脚本HTML服务的上传表单。

你需要什么

Google帐户
Google云端硬盘
Google Apps脚本 - 也称为Google脚本

Google Apps Script

有多种方法可以在Google Apps脚本代码编辑器中结束。

直接从网址加载Apps脚本：https://script.google.com
首先打开Google表格，然后打开“应用程序脚本”
转到Google云端硬盘，然后打开应用脚本：https://drive.google.com/drive/#my-drive
转到Google云端硬盘，然后点击“应用脚本”项目文件
从Google文档打开Apps脚本
等

我提到这一点是因为如果你不了解所有的可能性，那可能会有点混乱。 Google Apps脚本可以嵌入Google网站，表格，文档或表单中，也可以作为独立应用使用。

Apps Script Overview

这个例子是＆＃34; Stand Alone＆＃34;应用HTML服务。

HTML服务 - 使用HTML，CSS和Javascript创建网络应用

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元素，＆＃34;文件已上传！＆＃34;

保存文件，为项目命名
使用菜单：File，Manage Version，然后保存第一个版本
Publish，Deploy As Web App然后更新

第一次运行脚本时，它会询问权限，因为它会将文件保存到驱动器中。在第一次授予权限后，Apps脚本会停止，并且无法完成运行。所以，你需要再次运行它。该脚本在第一次使用后不会再次请求权限。

Apps脚本文件将显示在您的Google云端硬盘中。在Google云端硬盘中，您可以为谁可以访问和使用脚本设置权限。通过简单地向用户提供链接来运行脚本。像加载网页一样使用链接。

使用HTML服务的另一个例子可以在StackOverflow上的链接中看到：

File Upload with HTML Service

关于弃用的UI服务的说明：

UI服务和电子表格类（或其他类）的Ui getUi()方法之间存在差异2014年12月11日已弃用Apps脚本用户界面服务。它将继续用于一段时间，但我们鼓励您使用HTML服务。

Google Documentation - UI Service

即使不推荐使用UI服务，电子表格类的getUi()方法也可以添加自定义菜单， NOT 已弃用：

Spreadsheet Class - Get UI method

我提到这一点是因为它们可能会让人感到困惑，因为它们都使用术语 UI 。

UI方法返回Ui返回类型。

您可以将HTML添加到UI服务，但不能在HTML服务中使用<button>，<input>或<script>标记。

以下是指向具有输入表单的共享Apps脚本Web应用程序文件的链接：

Shared File - Contact Form

Answer 2

截至2016年10月，Google已在原生Google表单中添加了文件上传问题类型，无需Google Apps脚本。 See documentation

Google Forms文件上传完整示例

2 个答案:

你需要什么

开始于：

使用HTML服务上传文件：