.DataTransfer stocker une image en ajax et la traiter en php
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);
$("#submit").click(function(){
$.ajax({
url:"profile_edit.php",
method:"POST",
data:formData,
contentType:false,
cache: false,
processData: false,
success:function(data){
$('.hgf').html(data);
}
})
})
});Ce que je veux
Bonsoir j'aimerai stocker une image deposer en drag and drop dans une balise html type span et de l'envoyer sur ma page php pour traiter l'image pour l'envoyer ajax avec jquery et javascript j'aurai aimer faire le drag and drop 100% en php mais aucune fonction qui permet de recuperer une image de google en glisser deposer
tout en sachant que je souhaite envoyer l'image depuis un formulaire html qui contient pas que l'image il y'a des donner que je traite en php
Ce que j'obtiens
je n'obtien rien je n'arrive pas a comprendre comment fonctionne l'ajax quand je passe par le processus classique avec l'input tout roule mon formulaire passe et le profil de l'utilisateur ce met a jour avec la photo mais quand je l'envoie avec l'image en drag and drop sa ne marche pas image je ne sais pas ou elle et passer
3 réponses
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>
<div class="drag-area" style="
margin: 0 auto;
width: fit-content;
margin-top: 100px;
margin-bottom: 140px;
">
<span class="hgf" style="
padding: 120px;
border: dashed;
margin: 0 auto;
padding-top: 10%;
background-color: #ebebeb;
">Drag & Drop to Upload File</span>
<br>
<div id="imageForm" style="
margin: 0 auto;
width: fit-content;
margin-top: 50px;
">
<!-- <input class="klm" id="photo" name="photo" type="file"> -->
</div>
</div>