Question

我有一个有1个附件可能性的联系表格。数据通过php文件正确发送。但是结合AJAX echo，它不再起作用了。我做错了什么？

表格：

<form class="contact-form-php" action="" method="post" name="contactform" id="contactform" enctype="multipart/form-data">
    <input class="nex-bcf" type="text" name="name" placeholder="Uw Naam" required />
    <input class="nex-bcf" type="email" name="email" placeholder="Emailadres" required />
    <input class="nex-bcf" type="text" name="telefoon" placeholder="Telefoon" />

    <textarea name="message" class="nex-bcf" placeholder="Schrijf Bericht" required></textarea>
                        <br />
    <span style="color: #484848;">Send attachment(s)</span>
                        <br /><br />
    <input class="nex-bcf" type="file"  id="attachment1" name="attachment1" placeholder="Bijlage1" />
    <input class="nex-bc nex-cc nex-bgch" name="contactform" id="contactform_send" type="submit" value="Versturen" />
</form>

我的javascript：

 $(document).ready(function()
 {
    $('#contactform_send').click(function(e) {
    e.preventDefault();
    $('#contactform_send').val($(this).val());
    var data;

    data = new FormData();
    data.append( 'file', $( '#attachment1' )[0].files[0] );
     $.ajax({
        type : 'POST',
        url  : 'helpers/email_send.php',
        data : data,
        success :  function(data) {                   
                    $(".email_wrapper").delay(500).fadeIn(500).show(function()
                    {
                        $(".email_wrapper").html(data);

                    });

        },
        complete :  function(){
           $('html, body').animate({
           scrollTop: $('#contactanchor').offset().top -100},
           'slow');

        }

    });

  });

});

Answer 1

＆＃13;

<form class="contact-form-php" method="post" name="contactform" id="contactform" enctype="multipart/form-data">
    <input class="nex-bcf" type="text" name="name" placeholder="Uw Naam" required />
    <input class="nex-bcf" type="email" name="email" placeholder="Emailadres" required />
    <input class="nex-bcf" type="text" name="telefoon" placeholder="Telefoon" />

    <textarea name="message" class="nex-bcf" placeholder="Schrijf Bericht" required></textarea>
                        <br />
    <span style="color: #484848;">Send attachment(s)</span>
                        <br /><br />
    <input class="nex-bcf" type="file" id="attachment1" name="attachment1" placeholder="Bijlage1" />
    <button class="nex-bc nex-cc nex-bgch" name="contactform" id="contactform_send">Versturen</button>
</form>

＆＃13;

我将向您展示我使用自己的AJAX上传表单所做的工作。关于你的表格的一些事情让我觉得有问题。当您使用AJAX上传时，我不认为保持action=""标记中包含的<form>是个好主意。应完全省略此属性。我还用<input type="submit" />替换了表单的<button>，因为根据我的经验，使用type="submit"的输入会干扰AJAX。

现在，在JavaScript中。应将 FormData() 构造函数作为参数提供给表单的HTML元素。我通过了$("form")[0]。在您使用$("#attachment1")[0].files[0]的代码中，我注意到我使用了不同的东西。我将其替换为我使用的.prop("files")[0]。

$(document).ready(function() {
    $('#contactform_send').click(function(e) {
        e.preventDefault();
        $('#contactform_send').val($(this).val());
        var data;

        // FormData() must be constructed with the form element on the page
        data = new FormData($("form")[0]);
        data.append("file", $("#attachment1").prop("files")[0]);
        $.ajax({
            type: "POST",
            url: "helpers/email_send.php",
            data: data,
            dataType: "text",
            // these next two are just what I use on mine, remove if it doesn't work for you
            contentType: false,
            processData: false,
            success: function(response) {                   
                $(".email_wrapper").delay(500).fadeIn(500).show(function()
                {
                    $(".email_wrapper").html(response);

                });
            },
            complete: function() {
                $('html, body').animate({
                    scrollTop: $('#contactanchor').offset().top -100},
                'slow');
            }

        });

    });
});

需要注意的其他事项：您使用变量data来存储FormData()对象，但您还使用名为data的变量作为success的参数功能。这很可能会导致错误，我很肯定会以某种方式影响AJAX。幸运的是，success函数的参数名称是任意的。我将其更改为response。

如何通过表单结合ajax jquery发送附件

1 个答案: