Код: Выделить всё
document.addEventListener("DOMContentLoaded", (e) => {
const dropZone = document.getElementById("div1")
dropZone.addEventListener("dragenter", (e) => {
console.log("In enter " + dropZone)
e.preventDefault();
dropZone.style.backgroundColor = "#FFF"
})
dropZone.addEventListener("dragover", (e) => {
console.log("In over " + dropZone)
e.preventDefault();
})
dropZone.addEventListener("dragleave", (e) => {
console.log("In leave")
e.preventDefault();
dropZone.style.backgroundColor = ""
})
dropZone.addEventListener("drop", catchFiles)
})
function catchFiles(e) {
e.preventDefault();
document.getElementById("div1").style.backgroundColor = ""
console.log("File(s) dropped");
let fileHolder = new FormData()
let fileCount = 0
if (e.dataTransfer.items) {
// Use DataTransferItemList interface to access the file(s)
[...e.dataTransfer.items].forEach((item, i) => {
// If dropped items aren't files, reject them
if (item.kind === "file") {
const file = item.getAsFile()
console.log(`… file[${i}].name = ${file.name}`)
fileHolder.append("file"+i, file, file.name)
fileCount++
}
});
} else {
// Use DataTransfer interface to access the file(s)
[...e.dataTransfer.files].forEach((file, i) => {
console.log(`… file[${i}].name = ${file.name}`);
fileHolder.append("file"+i, file, file.name)
fileCount++
});
}
if (fileCount == 0) {
alert("Zero files received")
return
}
alert("got " + fileCount + " files")
return
const abortControl = new AbortController();
const signal = abortControl.signal;
const fetchOpts = {signal:signal, method:'POST', body: fileHolder, cache:"no-cache"};
const response = fetch("https://localhost:7196/data/uploadfiles", fetchOpts).catch(
err => {
console.log("Upload failed: " + err.message);
return
});
if (!signal.aborted) {
alert("Cancelled")
return
}
}< /code>
body {
}
#div1:active {
cursor: url("data:image/svg+xml;utf8,"), auto;
}
#div1 {
float: left;
width: 100px;
height:100px;
padding: 10px;
border: 1px solid black;
align: center;
vertical-align: middle;
background-color: lightblue;
cursor: url("data:image/svg+xml;utf8,"), auto;
}
div p {
color: red;
}< /code>
File Drop Upload Example
Drag your file(s) into the Drop Zone
File Drop Zone
Подробнее здесь: https://stackoverflow.com/questions/797 ... nts-cursor
