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

注意：