Google App Script GAS-如何获得 <input type=“file”> 从表格

Question

我正在做一个小项目，我在网站上有一个html表单，我想使用google app脚本（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。
将type="hidden" input添加到#cc-form作为文本数据。 replace(/^.*,/, '')用于删除编码数据的标头。 match(/^.*(?=;)/)[0]用于检索上传文件的match(/^.*(?=;)/)[0] 。
单击提交按钮后，base64数据将发送到GAS。

关于气体

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

修改后的GAS：

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 Apps。
此示例脚本可以上传一个文件。 如果要上传多个文件，请修改脚本。 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”> 从表格

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-11-05 08:11:33

修改要点：

关于HTML

关于气体

修改后的GAS：

修改的HTML ：（已更新）

注意：

编辑：

Google App Script GAS-如何获得 <input type=“file”> 从表格

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-11-05 08:11:33

修改要点：

关于HTML

关于气体

修改后的GAS：

修改的HTML ：（已更新）

注意 ：

编辑：

解决方案1
1 已采纳 2017-11-05 08:11:33

注意：