如何通过Google Apps Script捕获HTML表单文本并记录到表格

我有一个Google Apps Script项目，实现了无登录批量上传文件到Google Drive，并将文件信息记录到Google表格的功能。但尝试了两周，始终无法捕获HTML表单中的文本输入字段内容并传递到脚本端——之前用document.getElementById()获取值后，没法成功传到后端。最终完成了功能修复，以下是初始代码和解决后的完整代码。

初始代码（存在文本字段传递问题） #

HTML前端部分 #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form id="uploadForm">
      <!-- 文本输入字段 -->
      <input type="text" id="userName" placeholder="输入姓名">
      <!-- 文件上传控件 -->
      <input type="file" id="fileInput" multiple>
      <button type="button" onclick="uploadFiles()">上传</button>
    </form>
    <script>
      function uploadFiles() {
        const fileInput = document.getElementById('fileInput');
        const userName = document.getElementById('userName').value;
        // 尝试传递userName但失败
        google.script.run.withSuccessHandler(onSuccess)
          .uploadToDrive(fileInput.files);
      }
      function onSuccess(message) {
        alert(message);
      }
    </script>
  </body>
</html>

后端GS代码 #

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

function uploadToDrive(files) {
  const folderId = '你的Drive文件夹ID';
  const folder = DriveApp.getFolderById(folderId);
  const sheet = SpreadsheetApp.openById('你的表格ID').getSheetByName('记录页');

  files.forEach(file => {
    const uploadedFile = folder.createFile(file);
    // 无法获取前端的userName值
    sheet.appendRow([uploadedFile.getName(), uploadedFile.getUrl(), new Date()]);
  });

  return '上传完成';
}

问题原因与修复思路 #

核心问题是前端调用google.script.run时，未将文本字段的值作为参数传递给后端函数。之前的代码仅传递了文件对象，遗漏了文本输入值。修复步骤：

• 前端获取文本字段值后，作为额外参数传给后端的uploadToDrive函数
• 后端函数新增对应参数，接收并使用该值

解决后的完整代码 #

HTML前端部分 #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form id="uploadForm">
      <input type="text" id="userName" placeholder="输入姓名" required>
      <input type="file" id="fileInput" multiple required>
      <button type="button" onclick="uploadFiles()">上传</button>
    </form>
    <script>
      function uploadFiles() {
        const fileInput = document.getElementById('fileInput');
        const userName = document.getElementById('userName').value;
        
        // 同时传递userName和文件对象给后端
        google.script.run.withSuccessHandler(onSuccess)
          .uploadToDrive(userName, fileInput.files);
      }
      function onSuccess(message) {
        alert(message);
        // 上传完成后重置表单
        document.getElementById('uploadForm').reset();
      }
    </script>
  </body>
</html>

后端GS代码 #

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

// 新增userName参数，接收前端传递的文本值
function uploadToDrive(userName, files) {
  const folderId = '你的Drive文件夹ID';
  const folder = DriveApp.getFolderById(folderId);
  const sheet = SpreadsheetApp.openById('你的表格ID').getSheetByName('记录页');

  files.forEach(file => {
    const uploadedFile = folder.createFile(file);
    // 将userName写入表格
    sheet.appendRow([userName, uploadedFile.getName(), uploadedFile.getUrl(), new Date()]);
  });

  return `上传完成，共上传${files.length}个文件`;
}

内容的提问来源于stack exchange，提问作者4n7h0ny