Google App Script GAS - 如何从表单中获取 <input type="file">

Question

我正在做一个小项目，我在网站上有一个 html 表单，我想使用 google 应用程序脚本 (GAS) 获取所有表单输入数据并将其发送到电子邮件地址。

到目前为止，我的代码运行良好；但是，我无法从 html 页面

上获取文件

这是我在 GAS 上使用的代码

function doPost(request) {
  var fname = request.parameters.txtName, femail = request.parameters.txtEmail, fnote = request.parameters.txtArea, ffile = request.parameters.fFileAttach;

  MailApp.sendEmail({
    to: "me@EmailAddress.com",
    subject: "Message from webform by: " + femail,
    htmlBody: "This message was sent by the user " + fname + "<br/>" +
    "User email address: " + femail + "<br />" +
    "Email message:<br/>" + fnote,
    replyTo: femail,
    attachments: [ffile]
  });
}

这是我的html表单代码：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <form action="myGAS_Link" id="cc-form" method="post">
  <div class="fTop">
    <span>Name:* </span><input name="txtName" type="text" placeholder="Your Name" id="fname" required="" autofocus>
    <span>E-Mail:* </span><input name="txtEmail" type="email" placeholder="Your e-Mail" id="femail" required="">
  </div>
  <!--------------------------->
  <div class="fSet1">
    <span>Notes:</span><br/>
    <textarea name="txtArea" id="fTextArea" rows="8"></textarea>
  </div>
  <!--------------------------->
  <div class="fSub">
   <span>Upload your File:* </span><input name="fFileAttach" id="fFileAttach" type="file" required>
   <input id="submit" type="submit">
  </div>
 </form>
  </body>
</html>

Answer 1

这个修改怎么样？

修改点：

关于HTML

使用 FileReader()，检索 base64 编码的文件、文件名和 mimetype。
将 input 和 type="hidden" 添加到 #cc-form 作为文本数据。 replace(/^.*,/, '') 用于去除编码数据的头部。 match(/^.*(?=;)/)[0] 用于检索上传文件的mimetype。
单击提交按钮时，base64 数据将发送到 GAS。

关于天然气

检索数据、文件名和 mimetype 分别为 request.parameters.data、request.parameters.filename 和 request.parameters.mimetype。
使用Utilities.base64Decode()解码数据。
使用 Utilities.newBlob() 创建 blob。
将 blob 作为附件导入。

修改后的气体：

function doPost(request) {
  var data = Utilities.base64Decode(request.parameters.data); // Added
  var ffile = Utilities.newBlob(data, request.parameters.mimetype, request.parameters.filename); // Added

  var fname = request.parameters.txtName, femail = request.parameters.txtEmail, fnote = request.parameters.txtArea; // Modified

  MailApp.sendEmail({
    to: "me@EmailAddress.com",
    subject: "Message from webform by: " + femail,
    htmlBody: "This message was sent by the user " + fname + "<br/>" +
    "User email address: " + femail + "<br />" +
    "Email message:<br/>" + fnote,
    replyTo: femail,
    attachments: [ffile]
  });

    return ContentService.createTextOutput("ok"); // Added
}

已修改 HTML：（已更新）

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script> <!-- Added -->
  </head>
  <body>
  <form action="myGAS_Link" id="cc-form" method="post">
  <div class="fTop">
    <span>Name:* </span><input name="txtName" type="text" placeholder="Your Name" id="fname" required="" autofocus>
    <span>E-Mail:* </span><input name="txtEmail" type="email" placeholder="Your e-Mail" id="femail" required="">
  </div>
  <!--------------------------->
  <div class="fSet1">
    <span>Notes:</span><br/>
    <textarea name="txtArea" id="fTextArea" rows="8"></textarea>
  </div>
  <!--------------------------->
  <div id="data"></div> <!-- Added -->
  <div class="fSub">
   <span>Upload your File:* </span><input name="fFileAttach" id="fFileAttach" type="file" required>
   <input id="submit" type="submit">
  </div>
 </form>
  </body>

<!-- Added -->
<script>
$('#fFileAttach').on("change", function() {
    var file = this.files[0];
    var fr = new FileReader();
    fr.fileName = file.name;
    fr.onload = function(e) {
        html = '<input type="hidden" name="data" value="'+e.target.result.replace(/^.*,/, '')+'" >';
        html += '<input type="hidden" name="filename" value="'+e.target.fileName+'" >';
        html += '<input type="hidden" name="mimetype" value="' + e.target.result.match(/^.*(?=;)/)[0] + '" >';
        $("#data").empty().append(html); // Modified
    }
    fr.readAsDataURL(file);
});
</script>

</html>

注：

为了使用这个，修改脚本后，请将Web Apps重新部署为新版本。这样，最新的脚本就会反映到 Web 应用程序中。
此示例脚本可以上传一个文件。如果要上传多个文件，请修改脚本。 var file = this.files[0];表示选中的第一个文件。当有一些文件时，是files[1], files[2] ....

如果我误解了你的问题，我很抱歉。

编辑：

您的附加问题已反映到示例脚本中。
- 已添加 <div id="data"></div>
- 由$("#cc-form").append(html);修改为$("#data").empty().append(html);

通过这些修改，上传最后选择的文件。

Google App Script GAS - 如何从表单中获取 <input type="file">

Google App Script GAS - How can I get an <input type="file"> from a form

html

javascript

form-submit

google-apps-script

修改点：

关于HTML

关于天然气

修改后的气体：

已修改 HTML：（已更新）

注：

编辑：