Question

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

两个联系表单工作正常，但上传的联系表单不会上传文件。帮助找到我做错了什么。

JS

$(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]),
            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);
        })
    })

});

带上传的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>

Answer 1

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

<input type="file" name="file_attach[]" />

为什么这个元素的名字中有 [] ？

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

<input type="file" name="file_attach" />

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

$(this.elements['file_attach[]'].files)

到

$(this.elements['file_attach'].files)

Answer 2

我想通了我缺少数据类型：＆＃34; json＆＃34;补充说，它工作

$(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);
        })
    })

});

页面上有多个联系表单有和没有上传ajax

2 个答案: