Drag and drop upload - enregistrement côté serveur
Posté : 27 mai 2015, 21:51
Bonjour à tous,
Je suis entrain de réaliser un upload d'image via l'API drag and drop. J'arrive à afficher mon image dans de la zone concernée. Mon souci ce que je n'arrive pas à l'enregistrer dans la base de données. J'utilise du jQuery, Ajax et PHP. Côté serveur je ne reçois pas un fichier mais plutôt un simple paramètre POST.
Je ne sais pas comment résoudre ce problème.
Merci par avance!
Ci-dessous le code:
Je suis entrain de réaliser un upload d'image via l'API drag and drop. J'arrive à afficher mon image dans de la zone concernée. Mon souci ce que je n'arrive pas à l'enregistrer dans la base de données. J'utilise du jQuery, Ajax et PHP. Côté serveur je ne reçois pas un fichier mais plutôt un simple paramètre POST.
Je ne sais pas comment résoudre ce problème.
Merci par avance!
Ci-dessous le code:
Code : Tout sélectionner
// Code HTML:
<div id="dropzone" style="width:600px; height:600px; border:3px dotted #000;">
<h3 class="droptext">Drag and Drop Images Here</h3>
</div>
// Code JS:
$(document).ready(function() {
$("div#dropzone").on('dragenter', function (e) {
e.preventDefault();
});
$("div#dropzone").on('dragover', function (e) {
e.preventDefault();
});
$("div#dropzone").on('drop', function (e) {
e.preventDefault();
var image =e.originalEvent.dataTransfer.files;
var affiche =e.originalEvent.dataTransfer.files[0];
if (affiche.type.match('image.*')) {
var mama=window.URL.createObjectURL(affiche)
document.getElementById('dropzone').style.backgroundImage='url('+mama+')'
createFormData(image);
}
});
});
function createFormData(image) {
var formImage = new FormData();
formImage.append('userImage', image[0]);
uploadFormData(formImage);
}
function uploadFormData(formData) {
$.ajax({
url: "upload.php",
type: "POST",
data: formData,
contentType:false,
cache: false,
processData: false,
success: function(data){
$('#dropzone').append(data);
}});
}
// Code PHP:
$upload_dir = '/images/';
if(is_array($_FILES)) {
if(is_uploaded_file($_FILES['userImage']['tmp_name'])) {
$cheminSource = $_FILES['userImage']['tmp_name'];
$cheminCible = $upload_dir.$_FILES['userImage']['name'];
if(move_uploaded_file($cheminSource, $cheminCible)) {
$q = array('mediaName'=>$cheminCible);
$req = $db->prepare('INSERT INTO medias SET media_name = :mediaName');
$req->execute($q);
}
}
}
// Code SQL:
// Structure de la table `medias`
CREATE TABLE IF NOT EXISTS `medias` (
`media_id` int(11) NOT NULL AUTO_INCREMENT,
`media_name` varchar(255) NOT NULL,
PRIMARY KEY (`media_id`),
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=2 ;