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

标签 javascript

我正在使用 Jquery 和 Ajax 将包含文本输入文件输入的表单提交到 php 页面,但在提交之前,我想验证提交之前输入的文本。

下面是表单页面

            <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。我真的希望有人能帮助我。谢谢。

最佳答案

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

    }
    });

关于javascript - 提交包含文本输入和文件输入的表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40058667/

相关文章:

javascript - 使用 JavaScript 中的正则表达式替换大文本中两个字符之间出现的每个字符串

javascript - 是否可以编辑现有网页的 CSS?

javascript - @Inject 在 Angular 中什么时候是可选的?

javascript - 禁用 JS,看不到文本内容 Wordpress Visual Composer

javascript - 页面加载 svg 上自动单击按钮

javascript - 在我的 View 中重复相同的图表,并且在页面刷新时,图表发生变化

javascript - 徽章内的全宽 material-ui 按钮?

javascript - 无法使用vuejs和electronicjs创建简单的文件资源管理器

javascript - 调用方法与使用函数调用方法

javascript - 为所有最新浏览器和所有文档类型(xhtml、html、html5)重置默认颜色 css 设置的所有已访问站点颜色