Envoyer une image sur un serveur par drag and drop en jQuery
Faire un drag and drop d'une image jpg sur votre page pour l'envoyer sur votre serveur avec de jQuery et du PHP
Alors je n'ai pas pondu le code, je l'ai récupéré de cette page :
http://www.maximechaillou.com/simple-upload-en-drag-and-drop-avec-html5-jquery-php/
Je l'ai ensuite analysé, écrit d'un bloc, un peu modifié et surtout commenté.
Voici la page à appeler côté client
<!DOCTYPE html>
<HTML lang="fr">
<HEAD>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery.js" type="text/javascript"></script>
<style>
#dropfile{
width: 300px;
height: 50px;
border: 3px dashed #BBBBBB;
line-height:50px;
text-align: center;
}
</style>
</HEAD>
<BODY>
<div id="bloc_page">
<div id="dropfile">Drop an image from your computer</div>
<SCRIPT TYPE="text/javascript">
$(function() {
//Initialiser tous les évènements liés au drag et au drop, afin d’éviter la propagation des évènements.
//https://api.jquery.com/on/
$(document).on('dragenter', '#dropfile', function() {
$(this).css('border', '3px dashed red');
return false;
});
$(document).on('dragover', '#dropfile', function(e){
e.preventDefault();
e.stopPropagation();
$(this).css('border', '3px dashed red');
return false;
});
$(document).on('dragleave', '#dropfile', function(e) {
e.preventDefault();
e.stopPropagation();
$(this).css('border', '3px dashed #BBBBBB');
return false;
});
//Traitement de l’événement drop, qui va lancer toutes les actions à faire au moment où on va lâcher notre image dans la dropbox.
$(document).on('drop', '#dropfile', function(e) {
if(e.originalEvent.dataTransfer){
if(e.originalEvent.dataTransfer.files.length) {
// Stop the propagation of the event
e.preventDefault();
e.stopPropagation();
$(this).css('border', '3px dashed green');
// Main function to upload
upload(e.originalEvent.dataTransfer.files);
}
}
else {
$(this).css('border', '3px dashed #BBBBBB');
}
return false;
});
//La fonction principale pour l’upload de l'image
//Elle commence par effectuer un contrôle sur le type de fichier, puis elle utilise FileReader, un objet d’une API disponible avec HTML5 : File.
//https://developer.mozilla.org/fr/docs/Web/API/FileReader/FileReader
//Cet objet va permettre de lire directement le fichier depuis le navigateur.
//La chose importante à comprendre avec la lecture de fichier depuis le navigateur, c’est que le traitement est asynchrone.
//C’est normal, le temps que la lecture de l’image se fasse, le script continu de tourner.
//Donc lorsque l’image sera chargée l'évènement reader.onload va se déclencher et lancer l’exécution de la fonction handleReaderLoad
function upload(files) {
var f = files[0] ;
// Only process image files.
if (!f.type.match('image/jpeg')) {
alert('The file must be a jpeg image');
return false ;
}
var reader = new FileReader(); //Objet d’une API disponible avec HTML5 : File.
// Quand l'image sera chargé, on déclenchera cette fonction
reader.onload = handleReaderLoad;
//Lecture du fichier. Donc quand cela sera terminé, cela reader.onload qui appelera la fonction handleReaderLoad
//La méthode readAsDataURL permet de lire le contenu de l’objet Blob ou File spécifié. À la fin de l’opération de lecture, la propriété readyState renvoie l’état DONE, et l’évènement loadend se déclenche. À ce moment-là, l’attribut result contient les données dans une URL représentant les données du fichier sous forme de chaîne encodée en base64
reader.readAsDataURL(f);
}
function handleReaderLoad(evt) {
var pic = {}; //On déclare un nouvel objet. Cf https://api.jquery.com/Types/
pic.file = evt.target.result.split(',')[1];
var str = jQuery.param(pic); //jQuery.param transforme l'image en une ligne de data que l'on peut poster dans une URL
$.ajax({
type: 'POST',
url: 'https://www.votresitewebcible/pagephpcible.php',
data: str,
success: function(response) {
console.log( "Image postée");
},
error: function( response ) {
console.log('Erreur pour poster l image : '+ response.status + " " + response.statusText);
}
});
}
});
</SCRIPT>
</div> <!-- div bloc_page -->
</BODY>
</HTML>
La page php cible. C'est elle qui va recevoir l'image postée encodée en base64, la décoder et l'écrire sur le serveur.
<!DOCTYPE html>
<HTML lang="fr">
<HEAD>
<meta charset="utf-8" />
</HEAD>
<BODY>
<?php
$CheminFichier = '/emplacement_sur_votre_serveur/ztest.jpg';
echo $CheminFichier."<br />\n";
$file = $_POST['file'];
//$name = md5(rand().time()."DuSelPourRenforcerMonHash").'.jpg';
// Encode it correctly
$encodedData = str_replace(' ','+',$file);
$decodedData = base64_decode($encodedData);
// Finally, save the image
file_put_contents($CheminFichier, $decodedData) ;
echo "Ok";
?>
</BODY>
</HTML>Article(s) en relation(s)