Перетаскивание файлов в элемент HTML переопределяет курсор моего выброса. ⇐ Javascript

[Anonymous]

РЕДАКТИРОВАТЬ 2 >>> < /p>
Я считаю, что ищу стандарт, который не существует от Firefox -moz-Drag-over? Если это не может быть сделано, я рад, что мне сказали, что это не может быть сделано. < /P>

Код: Выделить всё

#div1:-moz-drag-over {
cursor: url("data:image/svg+xml;utf8,
"), auto;

}
< /code>
>> < /p>
Этот вопрос отличается от других, предложенных в том, что он специально пытается манипулировать атрибутом CSS «курсор», пока его перетаскивают. Хотя это может быть сделано при колебании, когда файл перетаскивается из-за пределов браузера, мышиный портчик кажется неизменным. С моим требованием перетаскивание начинается с веб-страницы в файловой системе или электронной почте. [+Copy] < /p>


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