Upload drag&drop

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. Je ne réceptionne pas mon fichier côté serveur.

Je cherche une solution à ce problème.

Merci par avance!

Ci-dessous le code:

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
35
36
37
38
39
$(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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$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:

1
2
3
4
5
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 ;