Google Forms 文件上传完整示例
-
21-12-2019 - |
题
如何允许查看者使用 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 网站、表格、文档或表单中,也可以用作独立的应用程序。
此示例是一个带有 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 上的以下链接中看到:
关于已弃用的 UI 服务的说明:
UI Service 和 Ui 之间是有区别的 getUi()
电子表格类(或其他类)的方法 Apps 脚本 UI 服务已于 12 月 12 日被弃用。2014 年 11 日。它将继续工作一段时间,但我们鼓励您使用 HTML 服务。
即使 UI 服务 是 已弃用,有一个 getUi()
要添加的电子表格类的方法 自定义菜单, ,即 不是 已弃用:
我提到这一点是因为这可能会令人困惑,因为他们都使用术语 用户界面.
UI 方法返回一个 Ui
返回类型。
您可以将 HTML 添加到 UI 服务,但不能使用 <button>
, <input>
或者 <script>
使用 UI 服务在 HTML 中标记。
以下是带有输入表单的共享 Apps 脚本 Web 应用程序文件的链接:
其他提示
截至2016年10月,谷歌已在本机Google表单中添加了文件上传问题类型,而不需要Google Apps脚本。请参阅文档。