[英]Unable to upload XMLHttpRequest file
各位用戶下午好。 最近遇到一個文件傳輸問題。 並且伴隨着任務出現了一堆問題:有一段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);
}
}}
?>
當然沒有任何效果:文件不會傳輸到文件夾中。 我究竟做錯了什么? 為什么文件沒有被傳輸? 請幫助這位年輕的學生。
我自己解決了,錯誤在js中:
formData.append('file[]', file);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.