HTML 拖入文件时拖放区文件上传不起作用
HTML drop zone file upload not working when dragging in files
我有以下放置区,用户可以在其中 select 图片或将图片拖入放置区。
当我通过 input type=file
按钮 select 文件并单击 btnUpload
按钮时,图像被上传。但是,当我将项目拖入拖放区然后单击 btnUpload
按钮时,没有任何反应:没有日志记录,没有网络请求,什么都没有。
为什么?这是我的代码。
<div id="drop-area">
<span id="status"></span>
<p>Drop files here</p>
<input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
<label class="button" for="fileElem">Select files</label>
<progress id="progress-bar" max=100 value=0></progress>
<div id="gallery" /></div>
<input id="btnUpload" type="submit" class="button green small" value="Upload" />
<script type="text/javascript">
let btnUpload = document.getElementById("btnUpload")
btnUpload.addEventListener('click', uploadFiles, false)
function uploadFiles(event) {
event.preventDefault();
// TODO - validate file size, extension & amount
files = [...fileElem.files]
// Submit each file separately.
files.forEach(uploadFile)
//check if success and if so, remove from gallery
}
// This all copy & paste
// ************************ Drag and drop ***************** //
let dropArea = document.getElementById("drop-area")
// Prevent default drag behaviors
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false)
document.body.addEventListener(eventName, preventDefaults, false)
})
// Highlight drop area when item is dragged over it
;['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false)
})
;['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false)
})
// Handle dropped files
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('active')
}
function handleDrop(e) {
var dt = e.dataTransfer
var files = dt.files
handleFiles(files)
}
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.log('update', fileNumber, percent, total)
progressBar.value = total
return total === 100;
}
function handleFiles(files) {
files = [...files]
initializeProgress(files.length)
//files.forEach(uploadFile)
files.forEach(previewFile)
}
function previewFile(file) {
//console.error('file.name: ' + file.name);
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onloadend = function () {
let img = document.createElement('img')
img.id = file.name;//.toString().replaceAll('"', '').replaceAll('.', '').replaceAll(' ', '_');
img.src = reader.result
document.getElementById('gallery').appendChild(img)
}
}
function uploadFile(file, i) {
var url = '/api2/uploadfile/135/3435' // TODO: change end point
var xhr = new XMLHttpRequest()
var formData = new FormData()
xhr.open('POST', url, true)
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
// Update progress (can be used to show progress indicator)
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) {
if (updateProgress(i, 100)) {
//$("'" + "#gallery #" + xhr.responseText.replaceAll('"', '').replaceAll('.', '').replaceAll(' ', '_') + "'").remove();//how do we handle spaces in filenames?
//console.error(i);
$('#gallery img:nth-child(' + (i + 1) + ')').hide();
//alert('Complete') // TODO
return true;
}
}
else if (xhr.readyState == 4 && xhr.status != 200) {
$('#status').html(GetMessageStatus('Error: ' + xhr.responseText, 1));
return false;
}
})
formData.append('file', file)
xhr.send(formData)
}
</script>
更新 1
我在这里添加了我的代码:https://plnkr.co/edit/HHPDL6Ndc6nxPMGn?open=lib%2Fscript.js
我调试了所有内容并执行了相同的路径。但是,当我通过按钮 select 1 张图像并点击上传按钮时,在函数 uploadFiles 中,在这一行 files = [...fileElem.files]
上,变量 files
的长度为 1,但是当我拖放时相同图片,然后点击上传按钮,变量 files
的长度为 0.
将 fileElem.files = files
添加到 handleFiles()
方法的顶部,或修改 uploadFiles()
方法。目前,uploadFiles()
仅从 fileElem
中提取文件。作为修复,您可以将 fileElem
的文件列表设置为 handleFiles()
中删除的文件。因此,您的新 handleFiles()
方法将如下所示:
function handleFiles(files) {
fileElem.files = files
files = [...files]
initializeProgress(files.length)
files.forEach(previewFile)
}
我认为您需要单独管理拖放的图像,也许在拖放文件的数组中,因为拖放区域中的文件不会被考虑在文件上传 html 标签中。
所以你需要添加一个全局变量来存储丢弃的文件数组。
let droppedFiles = [];
然后在 handleDrop(e) 方法中,您需要在 droppedFiles 数组中添加文件。
for (let i = 0; i < files.length; i++) {
droppedFiles.push(files[i]);
}
现在,您还需要在 submit/upload 按钮处添加此项,以确保所有文件都应附加。 (来自文件上传标签的文件和删除的文件)。
for (let i = 0; i < droppedFiles.length; i++) {
files.push(droppedFiles[i]);
}
let droppedFiles = [];
let btnUpload = document.getElementById("btnUpload")
btnUpload.addEventListener('click', uploadFiles, false)
function uploadFiles(event) {
event.preventDefault();
// TODO - validate file size, extension & amount
files = [...fileElem.files];
for (let i = 0; i < droppedFiles.length; i++) {
files.push(droppedFiles[i]);
}
console.log(files.length);
// Submit each file separately.
//files.forEach(uploadFile)
//check if success and if so, remove from gallery
}
// This all copy & paste
// ************************ Drag and drop ***************** //
let dropArea = document.getElementById("drop-area")
// Prevent default drag behaviors
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false)
document.body.addEventListener(eventName, preventDefaults, false)
})
// Highlight drop area when item is dragged over it
;['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false)
})
;['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false)
})
// Handle dropped files
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('active')
}
function handleDrop(e) {
var dt = e.dataTransfer
var files = dt.files
for (let i = 0; i < files.length; i++) {
droppedFiles.push(files[i]);
}
handleFiles(files)
}
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.log('update', fileNumber, percent, total)
progressBar.value = total
return total === 100;
}
function handleFiles(files) {
files = [...files];
// fileElem= [...files];
initializeProgress(files.length)
//files.forEach(uploadFile)
files.forEach(previewFile)
}
function previewFile(file) {
//console.error('file.name: ' + file.name);
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onloadend = function () {
let img = document.createElement('img')
img.id = file.name;//.toString().replaceAll('"', '').replaceAll('.', '').replaceAll(' ', '_');
img.src = reader.result
document.getElementById('gallery').appendChild(img)
}
}
function uploadFile(file, i) {
var url = '/api2/uploadfile/135/3435' // TODO: change end point
var xhr = new XMLHttpRequest()
var formData = new FormData()
xhr.open('POST', url, true)
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
// Update progress (can be used to show progress indicator)
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) {
if (updateProgress(i, 100)) {
//$("'" + "#gallery #" + xhr.responseText.replaceAll('"', '').replaceAll('.', '').replaceAll(' ', '_') + "'").remove();//how do we handle spaces in filenames?
//console.error(i);
$('#gallery img:nth-child(' + (i + 1) + ')').hide();
//alert('Complete') // TODO
return true;
}
}
else if (xhr.readyState == 4 && xhr.status != 200) {
$('#status').html(GetMessageStatus('Error: ' + xhr.responseText, 1));
return false;
}
})
formData.append('file', file)
xhr.send(formData)
}
<div id="drop-area" style="border: 1px dashed">
<span id="status"></span>
<p>Drop files here</p>
<input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
<label class="button" for="fileElem">Select files</label>
<progress id="progress-bar" max=100 value=0></progress>
<br />
<br />
</div>
<div id="gallery"></div>
<br />
<input id="btnUpload" type="submit" class="button green small" value="Upload" />
我有以下放置区,用户可以在其中 select 图片或将图片拖入放置区。
当我通过 input type=file
按钮 select 文件并单击 btnUpload
按钮时,图像被上传。但是,当我将项目拖入拖放区然后单击 btnUpload
按钮时,没有任何反应:没有日志记录,没有网络请求,什么都没有。
为什么?这是我的代码。
<div id="drop-area">
<span id="status"></span>
<p>Drop files here</p>
<input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
<label class="button" for="fileElem">Select files</label>
<progress id="progress-bar" max=100 value=0></progress>
<div id="gallery" /></div>
<input id="btnUpload" type="submit" class="button green small" value="Upload" />
<script type="text/javascript">
let btnUpload = document.getElementById("btnUpload")
btnUpload.addEventListener('click', uploadFiles, false)
function uploadFiles(event) {
event.preventDefault();
// TODO - validate file size, extension & amount
files = [...fileElem.files]
// Submit each file separately.
files.forEach(uploadFile)
//check if success and if so, remove from gallery
}
// This all copy & paste
// ************************ Drag and drop ***************** //
let dropArea = document.getElementById("drop-area")
// Prevent default drag behaviors
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false)
document.body.addEventListener(eventName, preventDefaults, false)
})
// Highlight drop area when item is dragged over it
;['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false)
})
;['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false)
})
// Handle dropped files
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('active')
}
function handleDrop(e) {
var dt = e.dataTransfer
var files = dt.files
handleFiles(files)
}
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.log('update', fileNumber, percent, total)
progressBar.value = total
return total === 100;
}
function handleFiles(files) {
files = [...files]
initializeProgress(files.length)
//files.forEach(uploadFile)
files.forEach(previewFile)
}
function previewFile(file) {
//console.error('file.name: ' + file.name);
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onloadend = function () {
let img = document.createElement('img')
img.id = file.name;//.toString().replaceAll('"', '').replaceAll('.', '').replaceAll(' ', '_');
img.src = reader.result
document.getElementById('gallery').appendChild(img)
}
}
function uploadFile(file, i) {
var url = '/api2/uploadfile/135/3435' // TODO: change end point
var xhr = new XMLHttpRequest()
var formData = new FormData()
xhr.open('POST', url, true)
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
// Update progress (can be used to show progress indicator)
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) {
if (updateProgress(i, 100)) {
//$("'" + "#gallery #" + xhr.responseText.replaceAll('"', '').replaceAll('.', '').replaceAll(' ', '_') + "'").remove();//how do we handle spaces in filenames?
//console.error(i);
$('#gallery img:nth-child(' + (i + 1) + ')').hide();
//alert('Complete') // TODO
return true;
}
}
else if (xhr.readyState == 4 && xhr.status != 200) {
$('#status').html(GetMessageStatus('Error: ' + xhr.responseText, 1));
return false;
}
})
formData.append('file', file)
xhr.send(formData)
}
</script>
更新 1
我在这里添加了我的代码:https://plnkr.co/edit/HHPDL6Ndc6nxPMGn?open=lib%2Fscript.js
我调试了所有内容并执行了相同的路径。但是,当我通过按钮 select 1 张图像并点击上传按钮时,在函数 uploadFiles 中,在这一行 files = [...fileElem.files]
上,变量 files
的长度为 1,但是当我拖放时相同图片,然后点击上传按钮,变量 files
的长度为 0.
将 fileElem.files = files
添加到 handleFiles()
方法的顶部,或修改 uploadFiles()
方法。目前,uploadFiles()
仅从 fileElem
中提取文件。作为修复,您可以将 fileElem
的文件列表设置为 handleFiles()
中删除的文件。因此,您的新 handleFiles()
方法将如下所示:
function handleFiles(files) {
fileElem.files = files
files = [...files]
initializeProgress(files.length)
files.forEach(previewFile)
}
我认为您需要单独管理拖放的图像,也许在拖放文件的数组中,因为拖放区域中的文件不会被考虑在文件上传 html 标签中。
所以你需要添加一个全局变量来存储丢弃的文件数组。
let droppedFiles = [];
然后在 handleDrop(e) 方法中,您需要在 droppedFiles 数组中添加文件。
for (let i = 0; i < files.length; i++) {
droppedFiles.push(files[i]);
}
现在,您还需要在 submit/upload 按钮处添加此项,以确保所有文件都应附加。 (来自文件上传标签的文件和删除的文件)。
for (let i = 0; i < droppedFiles.length; i++) {
files.push(droppedFiles[i]);
}
let droppedFiles = [];
let btnUpload = document.getElementById("btnUpload")
btnUpload.addEventListener('click', uploadFiles, false)
function uploadFiles(event) {
event.preventDefault();
// TODO - validate file size, extension & amount
files = [...fileElem.files];
for (let i = 0; i < droppedFiles.length; i++) {
files.push(droppedFiles[i]);
}
console.log(files.length);
// Submit each file separately.
//files.forEach(uploadFile)
//check if success and if so, remove from gallery
}
// This all copy & paste
// ************************ Drag and drop ***************** //
let dropArea = document.getElementById("drop-area")
// Prevent default drag behaviors
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false)
document.body.addEventListener(eventName, preventDefaults, false)
})
// Highlight drop area when item is dragged over it
;['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false)
})
;['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false)
})
// Handle dropped files
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('active')
}
function handleDrop(e) {
var dt = e.dataTransfer
var files = dt.files
for (let i = 0; i < files.length; i++) {
droppedFiles.push(files[i]);
}
handleFiles(files)
}
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.log('update', fileNumber, percent, total)
progressBar.value = total
return total === 100;
}
function handleFiles(files) {
files = [...files];
// fileElem= [...files];
initializeProgress(files.length)
//files.forEach(uploadFile)
files.forEach(previewFile)
}
function previewFile(file) {
//console.error('file.name: ' + file.name);
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onloadend = function () {
let img = document.createElement('img')
img.id = file.name;//.toString().replaceAll('"', '').replaceAll('.', '').replaceAll(' ', '_');
img.src = reader.result
document.getElementById('gallery').appendChild(img)
}
}
function uploadFile(file, i) {
var url = '/api2/uploadfile/135/3435' // TODO: change end point
var xhr = new XMLHttpRequest()
var formData = new FormData()
xhr.open('POST', url, true)
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
// Update progress (can be used to show progress indicator)
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) {
if (updateProgress(i, 100)) {
//$("'" + "#gallery #" + xhr.responseText.replaceAll('"', '').replaceAll('.', '').replaceAll(' ', '_') + "'").remove();//how do we handle spaces in filenames?
//console.error(i);
$('#gallery img:nth-child(' + (i + 1) + ')').hide();
//alert('Complete') // TODO
return true;
}
}
else if (xhr.readyState == 4 && xhr.status != 200) {
$('#status').html(GetMessageStatus('Error: ' + xhr.responseText, 1));
return false;
}
})
formData.append('file', file)
xhr.send(formData)
}
<div id="drop-area" style="border: 1px dashed">
<span id="status"></span>
<p>Drop files here</p>
<input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
<label class="button" for="fileElem">Select files</label>
<progress id="progress-bar" max=100 value=0></progress>
<br />
<br />
</div>
<div id="gallery"></div>
<br />
<input id="btnUpload" type="submit" class="button green small" value="Upload" />