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