php - 单击按钮时使用 AJAX 将表单序列化数据和文件发送到服务器

问题描述

我正在尝试使用 AJAX 将表单发送到服务器，并且在此表单中，我还想上传一些文件。但是，表单中的信息是从服务器发送的，我怀疑这会导致一些问题。

下面是我用来尝试提交表单和文件的方法：

HTML

<form id="new_equipment_submit_form"></form>

jQuery

//Submit form
function general_submit_form(path, query, button, form, additional_code) {
    $(document).on("click", button, function() {
        var data = $(this).closest('form').serialize();
        var url = path + '?' + query;

        $.ajax({
            type: 'POST',
            data: data,
            url: url,
            enctype: 'multipart/form-data',
            contentType: false,
            processData: false,
            success: function(data) {
                console.log(data);
                if (data == 0) {
                    alert("Required parameters are empty!");
                } else if (data == 1) {
                    $(".custom_input").closest('tr').addClass('hidden');
                    $(form).trigger('reset');
                    additional_code && additional_code(data);                   
                } else if (data == 2) {
                    alert("Storage name or serial taken");
                } else if (data == 3) {
                    alert("QR code already in use!")
                } else if (data == 4) {
                    alert("Date already booked!");
                } else if (data == 5) {
                    alert("Date booked for this timeslot!");
                } else if (data == 6) {
                    alert("You cannot make bookings in the past!");
                } 
            }
        });
    }); 
}
general_submit_form(equipment_path, 'new_equipment_submit', '#submit_new_equipment', '#new_equipment_submit_form', function(form) {
    alert("Equipment Added");
}
//Fetch submission form for new equipment
function general_fetch_database(path, query, result) {
    var url = path + '?' + query;
    $.ajax({
        type: 'GET',
        url: url,
        success: function(data) {
            $(result).html(data);
        }
    });
}
//Fetch submission form for new equipment
general_fetch_database(equipment_path, 'fetch_equipment_submit_form', '#new_equipment_submit_form');

HTML 表单的实际内容是从服务器 PHP 发送的

//Fetch equipment submission form
if (isset($_GET['fetch_equipment_submit_form'])) {
    $output = '';
    $output .= '    
    <div id="eq_sub_cat_9" class="type_2_table eq_sub_cat hidden">
    <h3>Files Upload</h3>
    <table>
    <thead>
    </thead>
    <tbody>
    <tr>
    <td>
    <input type="file" id="eq_sub_filename" name="eq_sub_filename" required>
    </td>
    </tr>
    <tr>
    <td>
    <select>
    <option value="" selected disabled>Select a File Type</option>
    <option value="Financial Document">Financial Document</option>
    <option value="Manual">Manual</option>
    </select>
    </td>
    </tr>
    <tr>
    <td>
    <div class="labled">
    <input type="text" name="eq_sub_file_description">
    <span class="bar"></span>
    <label>File Description</label>
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    </div>
    ';

    echo $output;
}

//Submit a storage location to database
if (isset($_GET['new_equipment_submit'])) {

    if (isset($_FILES['eq_sub_filename']['file'])) {
        $file = $_FILES['eq_sub_filename']['file']; 

        $file_name = $_FILES['eq_sub_filename']['name']; 
        $file_tmp_name = $_FILES['eq_sub_filename']['tmp_name'];
        $file_size = $_FILES['eq_sub_filename']['size'];
        $file_error = $_FILES['eq_sub_filename']['error']; 
        $file_type = $_FILES['eq_sub_filename']['type'];

        $file_extention = explode('.', $file_name);
        $file_actual_extention = strtolower(end($file_extention));  

        $allowed = array('jpg', 'jpeg', 'png', 'pdf');

        if (in_array($file_actual_extention, $allowed)) {

            if ($file_error === 0) {
                if ($file_size < 1000000) {
                    $file_name_new = uniqid('', true).".".$file_actual_extention;
                    $file_directory = '../file_uploads/'.$file_name_new;
                    move_uploaded_file($file_tmp_name, $file_directory);
                } else {
                    echo "File size is too big!";
                }

            } else {
                echo "Upload Error!";
            }

        } else {
            echo "File type not allowed!";
        }
        echo 1;
        exit();
    }


    $equipment_name = $_POST['equipment_name']; 

    if (empty($equipment_name) || !isset($_POST['equipment_type'])) {
        echo 0;
        exit();
    } else {

        $stmt = $mysqli->prepare('SELECT equipment_name FROM equipment_database WHERE equipment_institute_id=? AND equipment_institute_branch_id=? AND equipment_name=? AND equipment_status=?');
        $stmt->bind_param('ssss', $institute_id, $institute_branch_id, $equipment_name, $active_status);
        $stmt->execute();
        $result = $stmt->get_result();

        if ($result->num_rows != 0) {
            echo 2;
            $stmt->close();
            exit();
        } else {
            $stmt1 = $mysqli->prepare('
                INSERT 
                INTO equipment_database (equipment_name, equipment_type, equipment_institute_id, equipment_institute_branch_id, equipment_status) 
                VALUES (?,?,?,?,?)');
            $stmt1->bind_param("sssss", $equipment_name, $equipment_type, $institute_id, $institute_branch_id, $active_status);
            if (empty($_POST['equipment_qr_link_input'])) {
                $stmt1->execute();
                $stmt1->close();
            }           
        }
    }

    echo 1;
    exit();
}

我知道一些变量丢失了，我省略了它们以简化问题。我认为问题出在 jQuery 的 AJAX 部分。

我尝试创建一个表单数据元素，但无论哪种方式，我都收到代码的文件上传部分错误：Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'..

我曾尝试查看类似的解决方案，但找不到问题使用服务器上传 HTML 表单的解决方案。

任何帮助，将不胜感激！

标签： phpjqueryajaxforms

php - 单击按钮时使用 AJAX 将表单序列化数据和文件发送到服务器

问题描述

解决方案

推荐阅读