11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Upload drag and drop jQuery - php

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 consernée, je ne vois rien qui s'affiche. Et non image n'est pas enrégistrer 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:


<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;
		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:


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:


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 ;
dinolam a écrit :
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 consernée, je ne vois rien qui s'affiche. Et non image n'est pas enrégistrer 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:


&lt;div id="dropzone" style="width:600px; height:600px; border:3px dotted #000;"&gt;
	&lt;h3 class="droptext"&gt;Drag and Drop Images Here&lt;/h3&gt;
&lt;/div&gt;


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;
		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:


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'=&gt;$cheminCible, 'mediaUrl'=&gt;$upload_dir, 'idUser'=&gt;$row['user_id']);
			$req = $db-&gt;prepare('INSERT INTO medias SET media_name = :mediaName, media_url = :mediaUrl, user_id = :idUser');
			$req-&gt;execute($q);
		}
	}
}


Code sql:


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 ;
Sujet clos
Aller à