Google Forms 文件上传完整示例

StackOverflow https://stackoverflow.com//questions/21013693

题

如何允许查看者使用 Google 表单将一些文件上传到我的表单并将其保存到我的 Google 云端硬盘？

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

有帮助吗？

解决方案

更新：Google 表单现在可以上传文件。这个答案是在 Google Forms 能够上传文件之前发布的。

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

笔记:我确实有一个例子 两个都 UI 服务和 HTML 服务，但删除了 UI 服务示例，因为 UI 服务已弃用。

笔记:现在唯一可用的沙箱设置是 IFRAME. 。我你想用一个 onsubmit 开始表单标签中的属性： <form onsubmit="myFunctionName()">, ，可能会导致表单提交后从屏幕上消失。

如果您使用的是 NATIVE 模式，您的文件上传 Web 应用程序可能不再工作。使用 NATIVE 模式，表单提交不会调用页面从屏幕上消失的默认行为。如果您使用的是 NATIVE 模式，并且您的文件上传表单不再有效，那么您可能正在使用“提交”类型按钮。我猜测您可能还使用“google.script.run”客户端 API 将数据发送到服务器。如果您希望页面在提交表单后从屏幕上消失，您可以采用另一种方法。但您可能不在乎，甚至更喜欢让页面保留在屏幕上。根据您的需要，您需要以某种方式配置设置和编码。

如果您正在使用“提交”类型的按钮，并且想继续使用它，您可以尝试添加 event.preventDefault(); 到提交事件处理函数中的代码。或者你需要使用 google.script.run 客户端 API。

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

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

你需要什么

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

谷歌应用脚​​本

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

  • 直接从网址加载 Apps 脚本： https://script.google.com
  • 首先打开 Google 表格，然后打开 Apps 脚本
  • 转到您的 Google 云端硬盘，然后打开 Apps 脚本： https://drive.google.com/drive/#my-drive
  • 转到您的 Google 云端硬盘，然后单击 Apps 脚本项目文件
  • 从 Google 文档打开 Apps 脚本
  • ETC

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

Apps 脚本概述

此示例是一个带有 HTML 服务的“独立”应用程序。

HTML 服务 - 使用 HTML、CSS 和 Javascript 创建 Web 应用程序

Google Apps 脚本中只有两种类型的文件 Project:

  • 脚本
  • 超文本标记语言

脚本文件有一个 .gs 扩大。这 .gs code是用JavaScript编写的服务器端代码，并结合了Google自己的API。

  • 复制并粘贴以下代码
  • 保存
  • 创建第一个命名版本
  • 发布它

  • 设置权限

    你就可以开始使用它了。

开始于：

  • 在 Apps 脚本中创建一个新的空白项目
  • 复制并粘贴此代码：

使用 HTML 服务上传文件：

代码.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 云端硬盘中，您可以设置谁可以访问和使用该脚本的权限。只需向用户提供链接即可运行该脚本。就像加载网页一样使用该链接。

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

使用 HTML 服务上传文件

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

UI Service 和 Ui 之间是有区别的 getUi() 电子表格类（或其他类）的方法 Apps 脚本 UI 服务已于 12 月 12 日被弃用。2014 年 11 日。它将继续工作一段时间，但我们鼓励您使用 HTML 服务。

Google 文档 - UI 服务

即使 UI 服务 是 已弃用，有一个 getUi() 要添加的电子表格类的方法 自定义菜单, ，即 不是 已弃用：

Spreadsheet 类 - 获取 UI 方法

我提到这一点是因为这可能会令人困惑，因为他们都使用术语 用户界面.

UI 方法返回一个 Ui 返回类型。

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

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

共享文件 - 联系表

其他提示

截至2016年10月，谷歌已在本机Google表单中添加了文件上传问题类型，而不需要Google Apps脚本。请参阅文档。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top