PHP jQuery Ajax 表单使用 FormData 提交

Question

我在提交包含通过 jQuery 和 ajax 使用 FORMDATA 上传文件的表单时遇到问题。表单使用 PHP 正确提交并上传文件。

这是我第一次使用 FormData，所以我很感激能得到任何帮助。

<form id="submit-receipt" action="" method="post" enctype="multipart/form-data" name="submit-receipt">
    <input type="hidden" name="action" id="action" value="save" />
    <input type="hidden" name="formNum" id="formNum" value="<?php echo $formNum; ?>" />
    <input type="hidden" name="MSBSD" id="MSBSD" value="<?php echo $_SESSION['STUDENTID']; ?>" />
    <input type="hidden" name="__ST_Fam_ID" id="__ST_Fam_ID" value="<?php echo $_SESSION['FAMILYID']; ?>" />
    <input type="hidden" name="status" id="status" value="Submitted" />
    <input type="hidden" name="Reimbursement" id="Reimbursement" value="Reimbursement" />
    <input type="hidden" name="_fk_PO_Req_ID" id="_fk_PO_Req_ID" value="<?php echo $_SESSION['CRFORM']; ?>" />
    <table border="0" class="tableDemo bordered" style="width:100%">
        <tr class="ajaxTitle" style="background-color:#fff; padding:2px;">
            <th style="text-align:center">Receipt Date</th>
            <th style="text-align:center">Vendor</th>
            <th style="text-align:center">Description</th>
            <th style="text-align:center">ILP Class</th>
            <th style="text-align:center">Receipt Total</th>
            <th style="text-align:center">Receipt</th>
            <th style="text-align:center">Action</th>
        </tr>
        <tr>
            <td style="text-align:center;padding-top:10px"><input class="input-small" type="text" name="receiptDate" id="receiptdate" placeholder="Receipt Date" value="" ></td>
            <td style="text-align:center;padding-top:10px"><input class="input-small" type="text" name="gVendorID" id="gVendorID" placeholder="Vendor" value="" ></td>
            <td style="text-align:center;padding-top:10px"><input class="input-large" type="text" name="Description" id="Description" placeholder="Receipt Desc." value="" ></td>
            <td style="text-align:center;padding-top:10px">
                <select class="input-medium" name="IPL_Class" id="IPL_Class">
                    <option value="Language">Language</option>
                    <option value="Math">Math</option>
                    <option value="Science">Science</option>
                    <option value="Art">Art</option>
                    <option value="Phys. Ed">Phys. Ed</option>
                </select>
            </td>
            <td style="text-align:center;padding-top:10px"><input class="input-small" type="text" name="UnitCost" id="UnitCost" placeholder="Receipt Total" value="" ></td>
            <td style="text-align:center;padding-top:10px"><input id="file" class="input-block-level" type="file" name="file"></td>
            <td style="text-align:center;padding-top:10px"><button type="submit" id="submitR" name="action2" class="button button-basic-green">Submit Receipt</button> </td>
        </tr>
    </table>
</form>

这是我的 jQuery：

$(document).ready(function() {
    var form = document.getElementById("submit-receipt");
    $('#submit-receipt').submit(function(event){
        console.log('Form Submitted');
        event.preventDefault();
        var formData = new FormData();
        formData.append( "action", $("#action").val() );
        formData.append( "formNum", $("#formNum").val() );
        formData.append( "MSBSD", $("#MSBSD").val() );
        formData.append( "__ST_Fam_ID", $("#__ST_Fam_ID").val() );
        formData.append( "status", $("#status").val() );
        formData.append( "Reimbursement", $("#Reimbursement").val() );
        formData.append( "_fk_PO_Req_ID", $("#_fk_PO_Req_ID").val() );
        formData.append( "receiptDate", $("#receiptDate").val() );
        formData.append( "gVendorID", $("#gVendorID").val() );
        formData.append( "Description", $("#Description").val() );
        formData.append( "IPL_Class", $("#IPL_Class").val() );
        formData.append( "UnitCost", $("#UnitCost").val() );
        formData.append('file', $('#file')[0].files[0]); 

        $.ajax({
            url: 'receiptProcess.php',
            data: formData,
            // THIS MUST BE DONE FOR FILE UPLOADING
            contentType: false,
            processData: false,
            type: 'POST',
            success: function(data){
                console.log(data);
                //$("#recResults").append(data);
            },
            error: function(e){
                console.log(alert('error ' + e.message));   
            }
        });                         
    });
});

如果我只是直接使用 PHP，表单会提交并上传文件。我想使用 AJAX 来防止页面刷新。谁能帮我吗。我希望我已经正确输入了所有内容。

Answer 1

试试这样的：

formData.append('file', $('input[name=file]')[0].files[0]);

另一部分是你如何在你的 php 代码中处理文件