带文件上传的html表单

时间:2018-01-18 15:13:36

标签: html css

目前我正试图让脚本工作。我想创建一个表单,我可以上传文件并将其发送到特定的邮件地址。 表单数据在我的邮件中传递。但上传的文件显示为文本,而不是附件。这是我的代码:

<HTML>
<body>
    <!-- Start of form -->
    <div class="container">
        <form id="gform" method="POST"
        action="https://script.google.com/macros/s/AKfycbwLZpEa2iDgug8yVh-s9qIvo0H0GK9_O0ioLjStFBdAlqjGcgw/exec">

          <label for="fname">Naam & achternaam</label>
          <input type="text" id="name" name="Naam" placeholder="Vul hier uw naam in">

          <label for="lname">Email</label>
          <input type="email" id="email" name="email" placeholder="Vul hier uw email in">

          <label for="wnplts">Woonplaats</label> 
          <input type="text" id="wnplts" name="woonplaats" placeholder="Voer hier uw woonplaats in">

          <label for="nummer">Nummer</label>
          <input type="text" id="nummer" name="nummer" placeholder="Voer hier uw nummer in">

          <label for="salaris">Salaris (op fulltime basis)</label>
          <input type="number" id="salaris" name="salaris" placeholder="">

          <label for="file">Upload CV</label> <br>
          <input type="file" id="CV" name="CV" accept="file_extension" enctype="multipart/form-data">

            <br> <br>

          <label for="subject">Motivatie</label>
          <textarea id="subject" name="Motivatie" placeholder="Schrijf hier uw motivatie" style="height:200px"></textarea>

          <input type="submit" value="Submit">

        </form>
      </div>
      <!-- End of form -->


</body>
</HTML>

这是我的CSS:

input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */  
    border: 1px solid rgb(167, 167, 167); /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

input[type=number], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */  
    border: 1px solid rgb(167, 167, 167); /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

input[type=email], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */  
    border: 1px solid rgb(167, 167, 167); /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: rgb(141, 0, 0);
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=file] {
    background-color: rgba(255, 0, 0, 0);
    color: rgb(0, 0, 0);
    padding: 12px 20px;
    border: 10px;
    border-radius: 5px;

}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    background-color: #ff0000;
}

/* Add a background color and some padding around the form */
.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

我也在使用Google Scripts。它检索数据并将其作为电子邮件发回。这是代码:

var TO_ADDRESS = "themail@gmail.com"; // Email

function formatMailBody(obj) { // function to spit out all the keys/values from the form in HTML
  var result = "";
  for (var key in obj) { // loop over the object passed to the function
    result += "<h4 style='text-transform: capitalize; margin-bottom: 0'>" + key + "</h4><div>" + obj[key] + "</div>";
    // for every key, concatenate an `<h4 />`/`<div />` pairing of the key name and its value, 
    // and append it to the `result` string created at the start.
  }
  return result; // once the looping is done, `result` will be one long string to put in the email body
}

function doPost(e) {

  try {
    Logger.log(e); // the Google Script version of console.log see: Class Logger
    record_data(e);

    var mailData = e.parameters; // just create a slightly nicer variable name for the data

    MailApp.sendEmail({
      to: TO_ADDRESS,
      subject: "Contact form submitted",
      // replyTo: String(mailData.email), // This is optional and reliant on your form actually collecting a field named `email`
      htmlBody: formatMailBody(mailData)
    });

    return ContentService    // return json success results
          .createTextOutput(
            JSON.stringify({"result":"success",
                            "data": JSON.stringify(e.parameters) }))
          .setMimeType(ContentService.MimeType.JSON);
  } catch(error) { // if error return this
    Logger.log(error);
    return ContentService
          .createTextOutput(JSON.stringify({"result":"error", "error": e}))
          .setMimeType(ContentService.MimeType.JSON);
  }
}


/**
 * record_data inserts the data received from the html form submission
 * e is the data received from the POST
 */
function record_data(e) {
  Logger.log(JSON.stringify(e)); // log the POST data in case we need to debug it
  try {
    var doc     = SpreadsheetApp.getActiveSpreadsheet();
    var sheet   = doc.getSheetByName('responses'); // select the responses sheet
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    var nextRow = sheet.getLastRow()+1; // get next row
    var row     = [ new Date() ]; // first element in the row should always be a timestamp
    // loop through the header columns
    for (var i = 1; i < headers.length; i++) { // start at 1 to avoid Timestamp column
      if(headers[i].length > 0) {
        row.push(e.parameter[headers[i]]); // add data to row
      }
    }
    // more efficient to set values as [][] array than individually
    sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
  }
  catch(error) {
    Logger.log(e);
  }
  finally {
    return;
  }

}

有谁知道如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

我理解你的问题如下。

  • 在您的脚本中,来自HTML表单的数据在doPost(e)处接收,并且可以解析数据,并且字符串数据由formatMailBody()创建。
    • 这些工作正常。
  • 您希望将formatMailBody(obj)创建的字符串数据作为附件发送。
    • 这不起作用

如果我的理解是正确的,那么下面的修改怎么样? 由formatMailBody()创建的HTML将转换为blob,并作为附件文件发送。当您使用此修改过的脚本时,请将附件文件名"samplename.html"替换为您的。{/ p>

来自:

MailApp.sendEmail({
  to: TO_ADDRESS,
  subject: "Contact form submitted",
  // replyTo: String(mailData.email), // This is optional and reliant on your form actually collecting a field named `email`
  htmlBody: formatMailBody(mailData)
});

致:

MailApp.sendEmail({
  to: TO_ADDRESS,
  subject: "Contact form submitted",
  // replyTo: String(mailData.email), // This is optional and reliant on your form actually collecting a field named `email`
  //  htmlBody: formatMailBody(mailData)
  attachments: [Utilities.newBlob(formatMailBody(), MimeType.HTML, "samplename.html")] // Added
});

参考:

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