Question

我正在开展一个小项目，我在网站上有一个html表单，我想使用谷歌应用程序脚本（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。

关于GAS

分别将数据，文件名和mimetype检索为request.parameters.data，request.parameters.filename和request.parameters.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 个答案:

修改要点：

关于HTML

关于GAS

修改后的GAS：

修改后的HTML :(已更新）

注意：

编辑：