Google Forms文件上传完整示例

Posted 2021-05-06

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Google Forms文件上传完整示例相关的知识，希望对你有一定的参考价值。

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

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

答案

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

此解决方案不使用Google表单。这是使用Apps脚本Web应用程序的示例，它与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服务的上传表单。

What You Need

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

Google Apps Script

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

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

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

Apps Script Overview

这个例子是一个带有HTML服务的“Stand Alone”应用程序。

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元素，并显示消息“文件被上传！”