PHP/Javascript/AJAX 文件通过拖放上传。文件被转换为字符串答案

【问题标题】：PHP/Javascript/AJAX file upload via drag and drop. Files get converted to stringsPHP/Javascript/AJAX 文件通过拖放上传。文件被转换为字符串
【发布时间】：2020-05-10 15:59:59
【问题描述】：

我在使用放置区上传文件时遇到问题。似乎文件在到达后端时被转换为字符串。我将文件对象添加到新数组中，因为我希望用户能够在提交表单之前删除不需要的文件。

表格如下所示：

<form action="" class="dropzone" id="image_upload" enctype="multipart/form-data">

    <div class="upload-input">
        <label for="delivery_address" id="delivery_address_label">Delivery address</label>
        <input type="text" name="delivery_address" id="delivery_address" class="form-control" />
    </div>

    <div class="" id="drop-area">
        <p>Upload multiple files with the file dialog or by dragging and dropping images onto the dashed
           region
        </p>
    </div>

    <div class="upload-input">
        <input class="btn btn-info w-100" type="submit" id="btnUpload" value="Send" />
    </div>

</form>

Javascript：

let dropArea = document.getElementById("drop-area");

let fileList = [];

['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, preventDefaults, false)
})

function preventDefaults(e) {
    e.preventDefault()
    e.stopPropagation()
}

dropArea.addEventListener('drop', handleDrop, false)

function handleDrop(e) {
    let dt = e.dataTransfer;
    let files = dt.files;

    handleFiles(files);
}

function handleFiles(files) {
    files = [...files];
    files.forEach(addFiles);
}

function addFiles(file) {

    fileList.push(file);
}

btnUpload.addEventListener("click", function(evt) {
    evt.preventDefault();

    const xhr = new XMLHttpRequest();
    const form = document.getElementById("image_upload");
    const formData = new FormData(form);

    console.log(fileList);

    formData.append("fileList", fileList);

    xhr.open("POST", "add.php");

    xhr.onreadystatechange = function() {
        document.getElementById("phpResponse").innerHTML = this.responseText;
    };

    xhr.send(formData);
});

在 PHP 文件中，我现在只是 var 转储 $_FILES 以查看发生了什么：

var_dump($_FILES);

数组(0) { }

var_dump($_POST) 返回：

array(3) { ["delivery_type"]=> string(14) "拉脱维亚过去" ["delivery_address"]=> string(6) "qweeqe" ["fileList"]=> string(27) "[对象文件],[对象文件]" }

我找不到问题出在哪里。表单设置为 enctype="multipart/form-data"。在发送表单之前，我 console.log 了 fileList 变量，看起来文件仍然是文件：

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/API/FormData/append: “[value] 可以是 USVString 或 Blob（包括 File 等子类）。如果没有指定这些值，则值将转换为字符串。” - 您的 fileList 只是一个数组，因此会发生字符串转换，并且实际的 File 实例会变成 [object File]。您需要遍历您的文件列表，并将您拥有的各个 File 实例一一附加到您的 FormData 实例中。

标签： javascript php html ajax

【解决方案1】：

按照建议，我必须遍历 fileList 数组中 File 的每个实例，并将每个 File 单独附加到 FormData。

这部分：

formData.append("fileList", fileList);;

变成：

for (let i = 0; i < fileList.length; i++) {
    formData.append("fileList[]", fileList[i]);
}

在后端我可以遍历每个文件：

foreach($_FILES['fileList']['tmp_name'] as $key => $tmp_name){
    echo $_FILES['fileList']['name'][$key] . "<br />";
}

【讨论】：