在同一页面上输入文件的多个表单

Question

我是 jquery 的新手，在处理同一页面上的多个多部分表单时遇到问题。我正在尝试通过 php 向 mysql 添加一些数据，同时还上传 mp3 文件。每个表单使用同名+PHPID。第一种形式没有问题，但是当我使用其他形式时我没有获取文件数据。谁能帮帮我？

JS:

    $(".msc_send_button").click(function(e) { // changed
     var a = this.id; // Button id
     var form = $('#'+a).parents('form').attr('id'); // Get buttons parent form id
     
        e.preventDefault();
        var formData = new FormData($('#'+form)[0]); // Form Data
         
        $.ajax({
               url: '/formposts',
                type: 'POST',
                cache: false,
                contentType: false,
                processData: false,
                data: formData, 
               beforeSend: function(){
                    // change submit button value text
                    $('#'+a).html('Sending...');
                },
               success: function(data) {
                   if(data) {
                            // Message      
                            $('#info').html(data);
                            //Button Reset
                            $('#'+a).html('Send');
                   }
               },
                error: function(e){
                    alert(e);
                }
        });
        return false;
    });

PHP 形式：

    <form name="music-form" id="music-form<?php echo $cont['id']; ?>" enctype="multipart/form-data" novalidate>
    <input type="text" name="songno" id="songno" value="<?php echo $cont['song_no']; ?>">
    <input type="file" id="mp3" name="mp3" class="inputfile" accept="audio/*" multiple>
    <button type="submit" class="msc_send_button" id="msc_send_button<?php echo $cont['id']; ?>">Send</button>
    </form>

Answer 1

我认为您应该更改 jquery 选择器。我没有看到您的 html 代码，但您可能创建了嵌套表单。也许你可以使用 closest('from') 而不是 parents('form')

$(".msc_send_button").click(function(e) { // changed
  
  var buttonEl = $(this);
  var form = buttonEl.closest('form');

  e.preventDefault();
  var formData = new FormData(form[0]); // Form Data

  $.ajax({
    url: '/formposts',
    type: 'POST',
    cache: false,
    contentType: false,
    processData: false,
    data: formData, 
    beforeSend: function(){
      // change submit button value text
      buttonEl.html('Sending...');
    },
    success: function(data) {
      if(data) {
        // Message      
        $('#info').html(data);
        //Button Reset
        buttonEl.html('Send');
      }
    },
    error: function(e){
      alert(e);
    }
  });
  return false;
});

在同一页面上输入文件的多个表单

Multiple forms with file input on same page

php

forms

upload

jquery

multipart