1

这是 HTML 表单代码

<form method="POST"  class="comment-form" >
                            
    <div class="form-group col-md-10 ">
        <input class="form-control" placeholder="Name: " name="name"  required/>
    </div>
    <div class="form-group col-md-10 ">
        <input class="form-control" placeholder="Email address: " name="email" required/>
    </div>
    <div class="form-group col-md-10 ">
        <input class="form-control" placeholder="Your Phone: " name="phone"  required/>
    </div>
    <div class="form-group  col-md-10">
        <textarea rows="8" class="form-control" placeholder="Message.." name="comment" required></textarea>
    </div>
    <div class="form-group  col-md-10">
        <input type="file" id="fileupload" name="fileupload" value="upload" />
    </div>
    <div class="form-submit col col-md-12">
        <input type="button" class="btn btn-primary" value="Send Mail" onclick="SendMail()">                              
    </div>
</form>

我从https://www.codegrepper.com/code-examples/javascript/smtpjs+attachment借用的文件附件的 JavaScript 代码

  <script>
    function uploadFileToServer()
    {
        var input = document.querySelector("form")
        **var file = event.srcElement.files[0].name;** ->error
        var reader = new FileReader();
        reader.readAsBinaryString(file);
        reader.onload = function () {
            var dataUri = "data:" + file.type + ";base64," + btoa(reader.result);
           Email.send({
                Host : "smtp.gmail.com",
                Username : "........@gmail.com",
                Password : ".......",
                From: input.elements["email"].value,
                To : '..........com',
               Subject : "Send with base64 attachment",
               Body : input.elements["comment"].value + "<br>" + 
               input.elements["name"].value + file.name,
               Attachments : [
                  {
                      name : file.name,
                      data : dataUri
                  }]
           }).then(message => alert(message) );
       };
       reader.onerror = function() {
           console.log('there are some problems');
       };
    }
 </script>

问题是，一旦我单击按钮，我将在控制台中收到错误消息

未捕获的类型错误：无法读取 null 的属性“0”

4

2 回答 2

0

这意味着event.srcElement.files是null。您的示例不是独立的，因此不确定我是否可以为您提供更多帮助。Event.srcElement不赞成使用Event.target

于 2021-04-05T07:49:48.073 回答
0

您正在通过 访问文件event.srcElement.files，但看起来您的函数实际上并未将event用作参数。我从MDN 文档中的这个示例中得到提示，它使用this事件处理程序的上下文来访问输入。我们的处理程序将在form提交上而不是在提交上input，所以和this是。你可以用or访问它，它是一样的。formthis.elements["fileupload"]inputdocument.querySelectordocument.getElementById

// create listener for form onsubmit
function uploadFileToServer() {
  const file = this.elements["fileupload"]?.files?.[0];
  if (!file) {
    console.error("no file selected");
    return;
  }
  const reader = new FileReader();
  reader.readAsBinaryString(file);
  reader.onload = function () {
    const dataUri = "data:" + file.type + ";base64," + btoa(reader.result);
    Email.send({
      Host: "smtp.gmail.com",
      Username: "........@gmail.com",
      Password: ".......",
      From: this.elements["email"].value,
      To: "..........com",
      Subject: "Send with base64 attachment",
      Body:
        this.elements["comment"].value +
        "<br>" +
        this.elements["name"].value +
        file.name,
      Attachments: [
        {
          name: file.name,
          data: dataUri
        }
      ]
    }).then((message) => alert(message));
  };
  reader.onerror = function () {
    console.log("there are some problems");
  };
}

// gets the first form element with class="comment-form" -- unique id is better
const form = document.querySelector("form.comment-form");

// attach listener to the form
form.addEventListener("submit", uploadFileToServer);
<script src="https://smtpjs.com/v3/smtp.js"></script>

<form method="POST" class="comment-form" >
                            
    <div class="form-group col-md-10 ">
        <input class="form-control" placeholder="Name: " name="name"  required/>
    </div>
    <div class="form-group col-md-10 ">
        <input class="form-control" placeholder="Email address: " name="email" required/>
    </div>
    <div class="form-group col-md-10 ">
        <input class="form-control" placeholder="Your Phone: " name="phone"  required/>
    </div>
    <div class="form-group  col-md-10">
        <textarea rows="8" class="form-control" placeholder="Message.." name="comment" required></textarea>
    </div>
    <div class="form-group  col-md-10">
        <input type="file" id="fileupload" name="fileupload" value="upload" required />
    </div>
    <div class="form-submit col col-md-12">
        <input type="submit" class="btn btn-primary" value="Send Mail">                              
    </div>
</form>

于 2021-04-21T23:13:36.563 回答