如何使用formData通过ajax从2个不同的文件输入中上传文件？

Question

我正在尝试上传 2 个使用 ajax 格式的文件，但是当我 print_r($_POST) 和 print_r($_FILES) 时它向我显示空数组。

这是我的 html 代码：

<form id="addFloorEntityTypeFrom" method="POST" action="api/apiRoute.php" enctype="multipart/form-data boundary=----WebKitFormBoundary0BPm0koKA">
     <div class="col-md-12">
         <div class="form-group">
             <label for="categories">Category *</label>
             <select class="form-control" id="categories" name="category" required> 
                <option value="">Please select category</option>
                <?php foreach ($categories as $category) {
                    echo "<option value=\"" . $category['entityTypeId'] . "\">" . $category['entityName'] . "</option>";
                 } ?>
             </select>
        </div>
     </div>


     <div class="col-md-12">
        <div class="form-group">
          <label for="typeSVG" class="sr-only">Upload SVG *</label>
             <div class="input-group">
                <input type="text" name="filename" class="form-control custom-file" placeholder="Please select base svg file" readonly>
                <span class="input-group-btn">
                <div class="btn btn-dark custom-file custom-file-uploader">
                   <input type="file" id="typeSVG" name="entityTypeBaseSVG" onchange="this.form.filename.value = this.files.length ? this.files[0].name : ''" required/>
                                                                            Browse
                                                                        </div>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-12">
                                                            <div class="form-group">
                                                                <label for="baseImage" class="sr-only">Upload style Image *</label>
                                                                <div class="input-group">
                                                                    <input type="text" name="baseImage_filename" class="form-control custom-file" placeholder="Please base style image" readonly>
                                                                    <span class="input-group-btn">
                                                                        <div class="btn btn-dark custom-file custom-file-uploader">
                                                                            <input type="file" id="baseImage" name="base_style_image" onchange="this.form.baseImage_filename.value = this.files.length ? this.files[0].name : ''" required />
                                                                            Browse
                                                                        </div>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="col-md-12">
                                                            <button type="button" name="addFloorEntity" onclick="SaveEntity(this, true)" class="btn btn-dark mt-3">Save</button>
                                                            <button type="button" onclick="closeBaseEntity()" class="btn btn-default mt-3">Cancel</button>
                                                        </div>
</form>

这是我的 JavaScript 代码。

var formData = new FormData();
var formDataArray = $(form[0]).serializeArray();
   for(let i = 0; i < formDataArray.length; i++) {
     if(formDataArray[i].name !== 'entityTypeBaseSVG' || formDataArray[i].name !== 'base_style_image') {
        formData.append(formDataArray[i].name, formDataArray[i].value);
     }
   }
formData.append('entityTypeBaseSVG', $('#typeSVG')[0].files[0]);
formData.append('base_style_image', $('#baseImage')[0].files[0]);

$.ajax({
    method: "POST",
    url: baseUrl + 'newIFPAdmin/api/apiRoute.php',
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
}).done(function (response) {
    console.log('response', response);
});

这是我的服务器端代码..

print_r(json_decode(file_get_contents('php://input'), true));
print_r($_POST);
print_r($_FILES);
exit;

回复是：

Array
(
)
Array
(
)

Answer 1

请尝试此代码。它工作正常。查看屏幕截图。

https://ibb.co/wJWLfW5

<form id="addFloorEntityTypeFrom" method="POST" action="" enctype="multipart/form-data boundary=----WebKitFormBoundary0BPm0koKA">
<div class="col-md-12">
<div class="form-group">
<label for="categories">Category *</label>
<select class="form-control" id="categories" name="category" required> 
<option value="">Please select category</option>
<?php foreach ($categories as $category) {
echo "<option value=\"" . $category['entityTypeId'] . "\">" . $category['entityName'] . "</option>";
} ?>
</select>
</div>
</div>


<div class="col-md-12">
<div class="form-group">
<label for="typeSVG" class="sr-only">Upload SVG *</label>
<div class="input-group">
<input type="text" name="filename" class="form-control custom-file" placeholder="Please select base svg file" readonly>
<span class="input-group-btn">
<div class="btn btn-dark custom-file custom-file-uploader">
<input type="file" id="typeSVG" name="entityTypeBaseSVG" onchange="this.form.filename.value = this.files.length ? this.files[0].name : ''" required/>
                                            Browse
                                        </div>
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="baseImage" class="sr-only">Upload style Image *</label>
                                <div class="input-group">
                                    <input type="text" name="baseImage_filename" class="form-control custom-file" placeholder="Please base style image" readonly>
                                    <span class="input-group-btn">
                                        <div class="btn btn-dark custom-file custom-file-uploader">
                                            <input type="file" id="baseImage" name="base_style_image" onchange="this.form.baseImage_filename.value = this.files.length ? this.files[0].name : ''" required />
                                            Browse
                                        </div>
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <button type="button" name="addFloorEntity" onclick="SaveEntity(this, true)" class="btn btn-dark mt-3">Save</button>
                            <button type="button" onclick="closeBaseEntity()" class="btn btn-default mt-3">Cancel</button>
<script>
function SaveEntity()
{
var formData = new FormData();
 var formDataArray = $("form").serializeArray();  
   for(let i = 0; i < formDataArray.length; i++) {
     if(formDataArray[i].name !== 'entityTypeBaseSVG' || formDataArray[i].name !== 'base_style_image') {
        formData.append(formDataArray[i].name, formDataArray[i].value);
     }
   }
formData.append('entityTypeBaseSVG', $('#typeSVG')[0].files[0]);
formData.append('base_style_image', $('#baseImage')[0].files[0]);

$.ajax({
    method: "POST",
    url: 'demo.php',
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
}).done(function (response) {
    console.log('response', response);
});

}
</script>