c'est a dire je le mets ou enfaite moi je veux juste recuperer l'image dans un fichier php et la traiter j'ai reussi a le faire mais probleme encore c'est qu'il s'mbrouille avec le form html a coté
<script>
//selecting all required elements
const dropArea = document.querySelector(".drag-area"),
dragText = dropArea.querySelector(".hgf"),
// button = dropArea.querySelector(".kn"),
input = dropArea.querySelector(".klm");
let file; //this is a global variable and we'll use it inside multiple functions
// button.onclick = ()=>{
input.click(); //if user click on the button then the input also clicked
// }
input.addEventListener("change", function(){
//getting user select file and [0] this means if user select multiple files then we'll select only the first one
file = this.files[0];
dropArea.classList.add("active");
showFile(); //calling function
});
//If user Drag File Over DropArea
dropArea.addEventListener("dragover", (event)=>{
event.preventDefault(); //preventing from default behaviour
dropArea.classList.add("active");
dragText.textContent = "Release to Upload File";
});
//If user leave dragged File from DropArea
dropArea.addEventListener("dragleave", ()=>{
dropArea.classList.remove("active");
dragText.textContent = "Drag & Drop to Upload File";
});
//If user drop File on DropArea
dragText.addEventListener("drop", (event)=>{
event.preventDefault(); //preventing from default behaviour
var formData = new FormData();
file = event.dataTransfer.files[0];
//console.log(files_list);
for(var i=0; i<file.length; i++)
{
formData.append('photo', file[i]);
}
//console.log(formData);
$(".mrd").click(function(){
$.ajax({
url:"profile_edit.php",
method:"POST",
data:formData,
contentType:false,
cache: false,
processData: false,
success:function(data){
$('.hgf').html(data);
}
});
});//getting user select file and [0] this means if user select multiple files then we'll select only the first one
showFile(); //calling function
});
function showFile(){
let fileReader = new FileReader(); //creating new FileReader object
fileReader.onload = ()=>{
let fileURL = fileReader.result; //passing user file source in fileURL variable
let imgTag = `<img name="photo" src="${fileURL}" alt="" width="150" height="160">`; //creating an img tag and passing user selected file source inside src attribute
document.querySelector(".hgf").innerHTML = imgTag; //adding that created img tag inside dropArea container
}
fileReader.readAsDataURL(file);}
</script>