点击提交按钮访问通过 FormData 传递的数据答案

【问题标题】：access the data passed through FormData on clicking submit button点击提交按钮访问通过 FormData 传递的数据
【发布时间】：2015-12-15 05:50:12
【问题描述】：

我有一个包含多个输入字段的表单，包括文件输入。我正在使用 jquery validate 插件。我需要使用 ajax 提交表单。

HTML：

<form method="post" name="addstudent" id="registrationform" enctype="multipart/form-data">
some fields
<input type="submit" id="buttontext" 
    class="student_registrationform_button" value="submit" />

jquery：

$('#buttontext').click(function(){
    $("#registrationform").validate({
           invalidHandler: function(event, validator) {    
          //some code        
    },
 submitHandler: function(form){
            formdata = false;
            if (window.FormData) {
                    formdata = new FormData();
                }
           var i = 0, len = $(".file").length, img, reader, file;
           $('.file').each(function() { var file = this.files[0];
            if (window.FileReader) {
                            reader = new FileReader();
                            reader.readAsDataURL(file);
                     }
                if (formdata) {
                    formdata.append("file", file);
                }
           });
          $.ajax({
                    url:  "process.php",
                    type: 'POST',
                    //data: $(this).serialize(),
                    data: formdata,
                    cache: false,
                    contentType: false,
                    processData: false, 
                    success:function(data){  //alert(data);
                    console.log(data);return false;
          }

进程.php

当我检查 echo 'action:'.var_dump($_POST); 时，它显示空字符串

【问题讨论】：

//数据：$(this).serialize();你为什么评论序列化？
尝试删除FileReader()部分，这会将File对象转换为data URI；用$_FILE 替换$_POST
由于上传需要流程页面中的文件名，所以不能使用serialize。我需要使用formdata()对。@VigneswaranS
@guest271314 我的上传 php 脚本在第二页。我们如何在下一页获取要上传的文件名（upload.php）
@Techy 见stackoverflow.com/questions/28856729/…

标签： php jquery ajax forms validation

【解决方案1】：

    (function($) {
    $.fn.serializefiles = function() {
        var obj = $(this);

        var form_data = new FormData(this[0]);
        $.each($(obj).find('input[type="file[]"]'), function(i, tag) {
            $.each($(tag)[0].files, function(i, file) {
                form_data.append(tag.name, file);
            });
        });

        var params = $(obj).serializeArray();
        $.each(params, function (i, val) {
            form_data.append(val.name, val.value);
        });

        return form_data;
    };
    })(jQuery);


    var form_id = $('#registrationform');


    $.ajax({
        type: "POST",
        url: "process.php",
        data: form_id.serializefiles(),
        cache: false,
        processData: false,
        contentType: false,
        success: function (response) {
            console.log(data);return false;
        }


    });

【讨论】：

此代码也将处理您的所有表单数据，包括文件。请检查一下。谢谢。
我在表单中有其他输入字段。我也会得到这些字段吗
它将处理您表单中 ID = "registrationform" 的所有字段。请试一试。我还包括“console.log(data);return false;”，请检查您的控制台以获取响应。随意讨论任何问题。谢谢。
您可以在 submitHandler 中添加代码 from "var form_id = $('#registrationform');"向前。其余代码应位于“$('#buttontext').click(function(){” 或 .JS 文件开头的 OR 上方。谢谢。
我使用var_dump($_POST)时没有得到process.php中的文件名

【解决方案2】：

试试这个简单的功能：

 submitHandler: function(form){
          formdata = new FormData(form);
          $.ajax({
                    url:  "process.php",
                    type: 'POST',
                    //data: $(this).serialize(),
                    data: formdata,
                    cache: false,
                    contentType: false,
                    processData: false, 
                    success:function(data){  //alert(data);
                    console.log(data);return false;
          }

【讨论】：