Discussion :

[mOscar007]

Bonjour à tous,

Je viens vers vous pour un coup de pouce pour finaliser mon travail. Je suis entrain de réaliser un système d'upload Drag and Drop avec du jQuery.
J'ai fait tout mon traitement jQuery, ajax et php, je n'ai pas d'erreur. Et pourtant quand je glisse une image dans ma zone concernée, je ne vois rien qui s'affiche. Mon image n'est pas enregistrer non plus la base de données. Mon objectif est d’enregistrer mon image dans la base de données et en même temps l'afficher dans ma dropzone.

J'ai besoin d'aide please!

Merci par avance!

Voici mon code dans 3 fichiers différents (index.php, script.js, et upload.php):

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="dropzone" style="width:600px; height:600px; border:3px dotted #000;">
	<h3 class="droptext">Drag and Drop Images Here</h3>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$(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;
		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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
session_start();
$row = $_SESSION['user_id'];
$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, 'mediaUrl'=>$upload_dir, 'idUser'=>$row['user_id']);
			$req = $db->prepare('INSERT INTO medias SET media_name = :mediaName, media_url = :mediaUrl, user_id = :idUser');
			$req->execute($q);
		}
	}
}

Code sql :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
CREATE TABLE IF NOT EXISTS `medias` (
  `media_id` int(11) NOT NULL AUTO_INCREMENT,
  `media_name` varchar(255) NOT NULL,
  `media_url` varchar(255) NOT NULL,
  `user_id` int(11) NOT NULL,
  PRIMARY KEY (`media_id`),
  KEY `fk_media_users1_idx` (`user_id`),
  KEY `media_url` (`media_url`),
  KEY `user_id` (`user_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=2 ;

[melka one]

jour

remplace le originalEvent par event c'est peut etre la cause quand a un affichage de l'image dans la zone une solution serait de la mettre en background en utilisant createObjectURL sa donnerait ca

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 var image =e.target.files;
 var affiche =e.target.files[0];
    if (affiche.type.match('image.*')) {
         var mama=window.URL.createObjectURL(affiche)
	document.getElementById('dropzone').style.backgroundImage='url('+mama+')'
        createFormData(image);
   }

[mOscar007]

Re Melka One,

Merci d'avoir pris le temps de me répondre. Mais je ne comprend pas trop ton code. Dans quelle fonction dois-je le mettre.
Car en le mettant comme ça, j'ai une erreur suivante: Uncaught ReferenceError: e is not defined.

Merci!

[melka one]

dans l'evenement ondrop

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
$("div#dropzone").on('drop', function (e) {
 e.preventDefault();
 var image =e.target.files;
 var affiche =e.target.files[0];
    if (affiche.type.match('image.*')) {
         var mama=window.URL.createObjectURL(affiche)
	document.getElementById('dropzone').style.backgroundImage='url('+mama+')'
        createFormData(image);
   }
	});

normalement on devrait voir l'image qui s'affiche dans la zone de drop si c'est le cas et que l'image n'est toujour pas telechargé c'est que le probleme vient de la requete

[mOscar007]

Re Melka One,

J'ai une erreur avec ce code:

Uncaught TypeError: Cannot read property '0' of undefined

à la ligne suivante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var affiche = e.target.files[0];

Merci de m’éclairer!

[Bovino]

C'est parce que le code proposé se base sur un objet Event JavaScript, or dans ta fonction, tu utilises un objet Event jQuery, qui ne possède pas les mêmes propriétés.
Il faut revenir à l'événement d'origine :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var ev = e.originalEvent;

[melka one]

je pensait pas que Jquery pouvait interferer sur les evenement

[Bovino]

http://api.jquery.com/category/events/event-object/

[mOscar007]

Merci beaucoup,

Mon image s'affiche bien. Par contre elle n'est pas enregistrer en base de données.
J'ai vérifié ma requête SQL je n'ai fait d'erreur.

[Bovino]

Tout simplement parce que côté serveur, ce n'est pas un fichier que tu reçois mais un simple paramètre POST.

[mOscar007]

Re,

Comment faire en sorte de recevoir un fichier côté serveur au lieu d'un paramètre POST?

Merci!

[mOscar007]

Re Bovino,

Je ne comprend pas bien ce que tu veux dire par: Tout simplement parce que côté serveur, ce n'est pas un fichier que tu reçois mais un simple paramètre POST.

Est-ce que tu peux m'expliquer pourquoi je n'envoie pas de fichier côté? Et comment le faire?

Merci!

[melka one]

je vient de testé new FormData() et sa marche tres bien sa fonctionne de la même manière qu'un formulaire de plus le js me parait correcte donc pour la reception je te conseille de poser la question sur le forum php

[mOscar007]

Melka,

Merci pour le conseil. J'ouvrirai un autre topic sur le forum php.

A+