谷歌表单文件上传完整示例 [英] Google Forms file upload complete example

查看：100 发布时间：2021/12/15 21:45:53 file-upload google-apps-script google-forms

本文介绍了谷歌表单文件上传完整示例的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我正在寻找一个完整的示例:它必须说明要添加到示例 Google 表单 HTML 源代码中的代码.如何使用 Google Apps Script 将查看者的文件上传到我的 Google Drive 帐户?

解决方案

Google Forms 可以上传文件，但此解决方案不使用 Google Forms.此答案不是修改 Google 表单，这是无法完成的.这是一个使用 Google Apps Script Web App 的示例，它不同于 Google 表单.Web App 的功能与网站几乎相同，但您无法为其获取域名.

Apps Script 有一个名为 HTML Service 的服务，这就是这段代码所使用的.有关指南，请参阅:创建和提供 HTML

我想在开始的表单标签中使用 onsubmit 属性:<form onsubmit="myFunctionName()">，它会导致Web App 在表单提交后从屏幕上消失.

如果您使用提交"键入 HTML 按钮，并想继续使用它，您可以尝试在提交事件处理函数中的代码中添加 event.preventDefault(); 以防止浏览器选项卡尝试加载不同的HTML.或者您需要使用 google.script.run 客户端 API.

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

此示例显示了带有 Google Apps Script HTML 服务的上传表单.

您需要什么

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

Google Apps 脚本

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

直接从以下网址加载 Apps 脚本:https://script.google.com
先打开 Google Sheet，然后打开 Apps Script
转到您的 Google 云端硬盘，然后打开 Apps 脚本:https://drive.google.com/drive/#my-drive
转到您的 Google 云端硬盘，然后点击 Apps 脚本项目文件
从 Google 文档打开 Apps 脚本
等

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

Apps 脚本概览

此示例是独立"示例带有 HTML 服务的应用.

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

Google Apps Script 在 Project 中只有两种类型的文件:

脚本
HTML

脚本文件具有 .gs 扩展名..gs 代码是用 JavaScript 编写的服务器端代码，结合了 Google 自己的 API.

复制并粘贴以下代码
保存
创建第一个命名版本
发布
设置权限
然后你就可以开始使用它了.

开始于:

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

使用 HTML 服务上传文件:

Code.gs 文件(默认创建)

//为此，您需要在 Google 驱动器中创建一个名为://'用于虚拟主机'//或将硬编码的文件夹名称更改为文件夹名称//你想要写入的文件函数 doGet(e) {返回 HtmlService.createTemplateFromFile('Form').evaluate()//必须在设置沙盒模式之前进行评估.setTitle('在浏览器标签中显示的名称');}函数 processForm(theForm) {var fileBlob = theForm.picToLoad;Logger.log("fileBlob 名称:" + fileBlob.getName())Logger.log("fileBlob 类型:" + fileBlob.getContentType())Logger.log('fileBlob: ' + fileBlob);var fldrSssn = DriveApp.getFolderById(你的文件夹ID);fldrSssn.createFile(fileBlob);返回真；}

创建一个 html 文件:

<头><基本目标=_top"><身体><h1 id="main-heading">主标题</h1><br/><div id="formDiv"><form id="myForm"><输入名称=picToLoad"类型=文件"/><br/><输入类型=按钮"值=提交"onclick="picUploadJs(this.parentNode)";/></表单>

<div id="状态"样式=显示:无">正在上传.请稍等...

<脚本>函数 picUploadJs(frmData) {document.getElementById('status').style.display = 'inline';google.script.run.withSuccessHandler(updateOutput).processForm(frmData)};//由提交"调用的 Javascript 函数按钮处理程序，//显示结果.函数更新输出(){var outputDiv = document.getElementById('status');outputDiv.innerHTML = "文件已上传！";}

这是一个完整的工作示例.它只有两个按钮和一个

元素，因此您不会在屏幕上看到太多内容.如果 .gs 脚本成功，则返回 true，并运行 onSuccess 函数.onSuccess 函数 (updateOutput) 将内部 HTML 注入带有消息文件已上传！"

的 div 元素

保存文件，为项目命名
使用菜单:File、Manage Version 然后保存第一个版本
发布，部署为网络应用然后更新

当您第一次运行脚本时，它会请求权限，因为它正在将文件保存到您的驱动器.在您第一次授予权限后，Apps 脚本将停止，并且不会完成运行.所以，你需要再次运行它.第一次后脚本不会再次请求权限.

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

可以在 StackOverflow 上的此链接中查看使用 HTML 服务的另一个示例:

文件上传HTML 服务

这是带有输入表单的共享 Apps Script Web App 文件的链接:

共享文件 - 联系表

How do I allow my viewers to use Google Forms to upload some files to my form and save it to my Google Drive?

I am looking for a complete example: It must tell what code to add to the example Google Form HTML source. How to use Google Apps Script to upload the viewer's file to my Google Drive account?

解决方案

Google Forms can upload files, but this solution does not use Google Forms. This answer does not a modify a Google Form, which can't be done. This is an example that uses a Google Apps Script Web App, which is different than a Google Form. A Web App functions almost the same as a website, but you can't get a domain name for it.

Apps Script has a service named HTML Service, which is what this code uses. For the guide see: Create and Serve HTML

I you want to use an onsubmit attribute in the beginning form tag: <form onsubmit="myFunctionName()">, it will cause the Web App to disappear from the screen after the form submission.

If you are using a "submit" type HTML button, and want to continue to use it, you can try adding event.preventDefault(); to your code in the submit event handler function in order to keep the browser tab from trying to load different HTML. Or you'll need to use the google.script.run client side API.

A custom form for uploading files from a users computer drive, to your Google Drive can be created with the Apps Script HTML Service. This example requires writing a program, but I've provide all the basic code here.

This example shows an upload form with Google Apps Script HTML Service.

What You Need

Google Account
Google Drive
Google Apps Script - also called Google Script

Google Apps Script

There are various ways to end up at the Google Apps Script code editor.

Load Apps Script directly from the web address: https://script.google.com
Open a Google Sheet first, then open Apps Script
Go to your Google Drive, then Open Apps Script: https://drive.google.com/drive/#my-drive
Go to your Google Drive, then click on an Apps Script project file
Open Apps Script from Google Docs
etc

I mention this because if you are not aware of all the possibilities, it could be a little confusing. Google Apps Script can be embedded in a Google Site, Sheets, Docs or Forms, or used as a stand alone app.

Apps Script Overview

This example is a "Stand Alone" app with HTML Service.

HTML Service - Create a web app using HTML, CSS and Javascript

Google Apps Script only has two types of files inside of a Project:

Script
HTML

Script files have a .gs extension. The .gs code is a server side code written in JavaScript, and a combination of Google's own API.

Copy and Paste the following code
Save It
Create the first Named Version
Publish it
Set the Permissions

and you can start using it.

Start by:

Create a new Blank Project in Apps Script
Copy and Paste in this code:

Upload a file with HTML Service:

Code.gs file (Created by Default)

//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');
}

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;
}

Create an html file:

<!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>

This is a full working example. It only has two buttons and one <div> element, so you won't see much on the screen. If the .gs script is successful, true is returned, and an onSuccess function runs. The onSuccess function (updateOutput) injects inner HTML into the div element with the message, "The File was UPLOADED!"

Save the file, give the project a name
Using the menu: File, Manage Version then Save the first Version
Publish, Deploy As Web App then Update

When you run the Script the first time, it will ask for permissions because it's saving files to your drive. After you grant permissions that first time, the Apps Script stops, and won't complete running. So, you need to run it again. The script won't ask for permissions again after the first time.

The Apps Script file will show up in your Google Drive. In Google Drive you can set permissions for who can access and use the script. The script is run by simply providing the link to the user. Use the link just as you would load a web page.

Another example of using the HTML Service can be seen at this link here on StackOverflow:

File Upload with HTML Service

Here is a link to a shared Apps Script Web App file with an input form:

Shared File - Contact Form

这篇关于谷歌表单文件上传完整示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

谷歌表单文件上传完整示例 [英] Google Forms file upload complete example

问题描述

您需要什么

开始于:

使用 HTML 服务上传文件:

What You Need

Start by:

Upload a file with HTML Service:

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

谷歌表单文件上传完整示例 [英] Google Forms file upload complete example

问题描述

您需要什么

开始于:

使用 HTML 服务上传文件:

What You Need

Start by:

Upload a file with HTML Service:

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭