提交包含文本输入和文件输入的表单

Posted 2023-05-08

【中文标题】提交包含文本输入和文件输入的表单

【英文标题】：Submit form containing text input and file input

【发布时间】：2017-02-24 19:13:30

【问题描述】：

我正在使用 Jquery 和 Ajax 向 php 页面提交一个包含 text input 和 file input 的表单，但在提交之前，我想在提交之前验证文本输入。

下面是表单页面

            <form id="registrationForm"  method="POST"  name="registrationForm" enctype="multipart/form-data">

                <input type="text"  name="firstName" id="firstName" />

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

                <button type="submit"> UPLOAD</button>

            </form>

和 javascript 页面

 $('#registrationForm').validate(
        rules: 
            firstName:
                required: true
            
        ,
        message:
            firstName: 
                required: "Please Enter Name"
            
        ,


    submitHandler : function()

      //grab all form data  
      var formData = new FormData(this);

      $.ajax(
        url: 'submitPage.php',
        type: 'POST',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
          success: function(data)   
            $('#message').html(data);  
            $('#message').html(data).hide().fadeIn(1500,function()$('#message'));
             
        );

    
    );

以及接收页面的PHP页面

        <?php
            $firstName=$_POST['firstName'];
            $file=$_FILES['file']['name'];

            echo $firstName;
            echo $file;

         ?>

这会在 php 接收页面上返回 null。我真的希望有人可以帮助我。谢谢。

【问题讨论】：

完整答案在以下链接：***.com/questions/20795449/…

【参考方案1】：

$('#registrationForm').validate(
        rules: 
            firstName:
                required: true
            
        ,
        message:
            firstName: 
                required: "Please Enter Name"
            
        ,


    submitHandler : function()

      //grab all form data  
      var formData = new FormData(document.querySelector("form"));

      $.ajax(
        url: 'submitPage.php',
        type: 'POST',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
          success: function(data)   
            $('#message').html(data);  
            $('#message').html(data).hide().fadeIn(1500,function()$('#message'));
             
        );

    
    );