Je n'ai aucune connaissance dans JS mais je dois réaliser un petit projet donc pour le moment je recherche plutôt réussir à réaliser le projet plutôt qu'apprendre.
J'ai trouvé un script qui gère tous ce que je veux sur internet mais je suis bloqué à un endroit.
Voici le script
// ************************ Drag and drop screenshot ***************** //
let dropArea = document.getElementById("drop-area")
// Empecher les drags par défaut
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false)
document.body.addEventListener(eventName, preventDefaults, false)
})
// Surbrillance quand la souris est sur l'élément
;['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false)
})
;['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false)
})
// Gérer les fichiers déposés
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')
//barre de progression du téléchargement
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
}
function handleFiles(files) {
files = [...files]
initializeProgress(files.length)
files.forEach(uploadFile)
files.forEach(previewFile)
}
//preview des screens
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)
}
}
function uploadFile(file) {
let url = 'temp/'
let formData = new FormData()
formData.append('file', file)
fetch(url, {
method: 'POST',
body: formData
})
.then(() => { /* Done. Inform the user */ })
.catch(() => { /* Error. Inform the user */ })
}
Dans la fonction upload j'aimerai enregistrer les fichiers dans un dossier de mon projet.
Le dossier racine est catalog
Et j'aimerai l'enregistrer dans admin / temp
J'ai modifié la variable URL mais lorsque j'importe un fichier via le drag and drop j'ai une erreur pourtant le chemin est bon...
Je suis allé voir l'api fetch et je comprends pas d'ou vient l'erreur.
bonjour , une requête réseaux elle peut pas balancè un fichier dans un dossier ......
elle peut juste communiqué avec le serveur je doute que dans ton dossier temp , il existe un fichier index.php à exécuté d'où le 404 not found ...
ta requête doit pointé vers une url qui et traité par le serveur ces lui qui enregistrera les fichiers dans tel ou tel dossier après les avoir traité ( car ces des données clients ) , un truc du genre: http://localdev.wizzim.fr:81/catalog/traitement.php
qui est un fichier qui va traité les données envoyé en POST ,
<?php
$datas = $_POST ;
print_r( $datas ) ;
puis traité les données et enfin enregistré le/les fichier.s si les données son correct
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
suggestion de présentation.