无法上传 XMLHttpRequest 文件

Question

各位用户下午好。最近遇到一个文件传输问题。并且伴随着任务出现了一堆问题：有一段js代码是这样的：

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

;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, preventDefaults, false)
  document.body.addEventListener(eventName, preventDefaults, false)
})
;['dragenter', 'dragover'].forEach(eventName => {
  dropArea.addEventListener(eventName, highlight, false)
})
;['dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, unhighlight, false)
})
dropArea.addEventListener('drop', handleDrop, false)
function preventDefaults (e) {
  e.preventDefault()
  e.stopPropagation()
}
function highlight(e) {
  dropArea.classList.add('highlight')
}
function unhighlight(e) {
  dropArea.classList.remove('highlight')
}

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

function handleFiles(files) {
  files = [...files]
  initializeProgress(files.length)
  files.forEach(uploadFile)
  files.forEach(previewFile)
}

function uploadFile(file, i) { 
  var url = '/temp.php'
  var xhr = new XMLHttpRequest()
  var formData = new FormData(document.forms.myform)
  xhr.open('POST', url, true)
  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
  
  xhr.upload.addEventListener("progress", function(e) {
    updateProgress(i, (e.loaded * 100.0 / e.total) || 100)
  })
  xhr.addEventListener('readystatechange', function(e) {
    if (xhr.readyState == 4 && xhr.status == 200) {
    }
    else if (xhr.readyState == 4 && xhr.status != 200) {
    }
  })
  
  formData.append('file', file)
  xhr.send(formData)
}

function previewFile(file) {
  let reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onloadend = function() {
    let img = document.createElement('img')
    img.src = reader.result
    document.getElementById('gallery').appendChild(img)
  }
}

let uploadProgress = []
let progressBar = document.getElementById('progress-bar')
function initializeProgress(numFiles) {
  progressBar.value = 0
  uploadProgress = []
  for(let i = numFiles; i > 0; i--) {
    uploadProgress.push(0)
  }
}
function updateProgress(fileNumber, percent) {
  uploadProgress[fileNumber] = percent
  let total = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length
  console.debug('update', fileNumber, percent, total)
  progressBar.value = total
}

这是一个带有 php 处理程序的 html 表单：

<div id="drop-area">
    <form name="myform" class="my-form" enctype="multipart/form-data">
        <div id="gallery"></div>    
        <p><input type="file" id="fileElem" name="Test[]" style="font-size: 15px;" multiple accept="image/*" onchange="handleFiles(this.files)"></p>
        <label class="button" for="fileElem">Choose files</label>
        <progress id="progress-bar" max=100 value=0></progress>
        <div id="gallery"></div>
    </form>
</div>

<?php
foreach ($_FILES['file']['error'] as $key => $error) {
    if ($error = UPLOAD_ERROR_OK) {
        $uploaddir = "/mnt/";
        $uploaddir .= basename($_FILES['file']['name'][$key]);
        if(file_exists(uploaddir)) {
            unlink(uploaddir);
            move_uploaded_file($_FILES['file']['tmp_name'][$key], $uploaddir);
        }
        else {
            move_uploaded_file($_FILES['file']['tmp_name'][$key], $uploaddir);
        }
}}
?>

当然没有任何作用：文件不会传输到文件夹中。我究竟做错了什么？为什么文件没有被传输？ 请帮助这位年轻的学生。

Answer 1

我自己解决了，错误在js中：

formData.append('file[]', file);