Javascript 在一个页面上有多个联系人表单，可以上载ajax，也可以不上载ajax

我在一个页面上有3个联系人表单（2个模态，一个在页面上），其中1个表单有文件上传

两个联系人表单工作正常，但带有上载的联系人表单不会上载文件。需要帮助才能发现我做错了什么

JS

带上传的HTML表单

<form action="php/upload.php" method="POST" enctype="multipart/form-data">
  <p><input class="w3-input w3-border" type="text" placeholder="Full Name" required name="name"></p>
  <p><input class="w3-input w3-border" type="text" placeholder="Email Address" required name="email"></p>
  <p><input class="w3-input w3-border" type="number" placeholder="Telephone Number" required name="number"></p>
  <p><input type="file" name="userfile"  /></p>
  <button type="submit" id="uplaod-button"class="w3-btn-block w3-padding-large w3-gold w3-margin-bottom form-submit">Submit</button>
        <div class="form-messages"></div>
</form>   

提交

无需上传的HTML表单

<form id="ajax-enquires" method="POST" action="php/enquires.php">
  <p><input class="w3-input w3-border" type="text" placeholder="Full Name" required name="name"></p>
<p><input class="w3-input w3-border" type="text" placeholder="Email Address" required name="email"></p>
  <p><input class="w3-input w3-border" type="number" placeholder="Telephone Number" required name="number"></p>
<p><textarea class="w3-input w3-border" placeholder="Message" required name="message"></textarea></p>
  <button type="submit" class="w3-btn-block w3-padding-large w3-gold w3-margin-bottom form-submit">Send</button>
        <div class="form-messages"></div>
  </form> 

发送

问题在您的上传表单中带有以下标签：

为什么此元素的名称中有[]

当我将其更改为下面时，“提交”按钮工作正常：

您还需要更改JS中的以下行：

$（this.elements['file\u attach[]'].files）

到

---

$（this.elements['file\u attach'].files）

我发现我缺少数据类型：“json”添加了这个数据类型，它成功了

$(function () {


//Hide image on page load
$('#loader').hide(); 

    $('.form-submit').click(function (e) {
        e.preventDefault();

        $(this).prop('disabled', true);

        // Show image before making ajax call
        $('#loader').show(); 

        var form = $(this).closest('form');


        // Get the messages div.
        var formMessages = $('.form-messages');

        $(this).prop('disabled', false);

        $.ajax({
            type: 'post',
             url: form.attr('action'),
            data: new FormData(form[0]),
            dataType : "json",
            cache: false,
            contentType: false,
            processData: false
        })

        .done(function (response) {
            $('#loader').hide();

            $(formMessages).removeClass('error');

            $(formMessages).addClass('success');

            $(formMessages).text(response);

            setTimeout(function(){
                $(formMessages).text('');
                $(formMessages).removeClass('success')
            }, 3000);

            form[0].reset();

        })
        .fail(function (data) {
            $('#loader').hide();

            $(formMessages).removeClass('success');

            $(formMessages).addClass('error');

            if (data.responseText !== '') {
                $(formMessages).text(data.responseText);
            } else {
                $(formMessages).text('Oops! An error occured and your message could not be sent.');
            }

            //Remove message after x seconds
            setTimeout(function(){
                $(formMessages).text('');
                $(formMessages).removeClass('error')
            }, 7000);
        })
    })

});

---

我试过上面的方法，还是什么都没试过。我得到未捕获的TypeError:无法读取HtmlButtoneElement处未定义的属性“file_attach[]”。（contact.js:18）在chmlbuttonelement.dispatch（jquery.min.js:3）在chmlbuttonelement.q.handle（jquery.min.js:3）在cosole的同一个东西中，但没有[]它在小提琴中工作，当移除这些括号时。一定还有别的事。请检查您的控制台以了解更多信息。感谢您的帮助，我成功地通过了按钮，但按钮不起作用，但现在没有文件将上传联系人表单，而不上传工作。很好。非常感谢

$(function () {


//Hide image on page load
$('#loader').hide(); 

    $('.form-submit').click(function (e) {
        e.preventDefault();

        $(this).prop('disabled', true);

        // Show image before making ajax call
        $('#loader').show(); 

        var form = $(this).closest('form');


        // Get the messages div.
        var formMessages = $('.form-messages');

        $(this).prop('disabled', false);

        $.ajax({
            type: 'post',
             url: form.attr('action'),
            data: new FormData(form[0]),
            dataType : "json",
            cache: false,
            contentType: false,
            processData: false
        })

        .done(function (response) {
            $('#loader').hide();

            $(formMessages).removeClass('error');

            $(formMessages).addClass('success');

            $(formMessages).text(response);

            setTimeout(function(){
                $(formMessages).text('');
                $(formMessages).removeClass('success')
            }, 3000);

            form[0].reset();

        })
        .fail(function (data) {
            $('#loader').hide();

            $(formMessages).removeClass('success');

            $(formMessages).addClass('error');

            if (data.responseText !== '') {
                $(formMessages).text(data.responseText);
            } else {
                $(formMessages).text('Oops! An error occured and your message could not be sent.');
            }

            //Remove message after x seconds
            setTimeout(function(){
                $(formMessages).text('');
                $(formMessages).removeClass('error')
            }, 7000);
        })
    })

});