Bonjour

Jusqu'à présent, je propose sur mes sites de charger des fichiers en passant par un formulaire
Formulaire :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
	<formid="idFormu" action="Sauve_Fichier.php" METHOD="Post" onsubmit="return VerifFormulaire()" ENCTYPE="multipart/form-data">
 
		<div align="center">
			<b>Fichier concerné : </b>
			<br/>
			<br/>Entrer le chemin d'accès complet et le nom du fichier à enregistrer :
			<br/>
			<br/>
			<input name="Fichier" id="idFichier" size="100" type="File" >
			<br/>
			<br/>	
			<input type="submit" name="Copier" id="idCopier" value="Enregistrer sur le serveur" class="Bouton" />
	</form>

Sauvegarde :
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
15
16
17
18
19
20
21
22
23
24
25
26
	$RaisonNonSauvergarde="";
	$Fichier=$_FILES['Fichier']['name'];
	$FichierTemp=$_FILES['Fichier']['tmp_name'];
	$Erreur=$_FILES['Fichier']['error'];
	$MonVraiFichier=str_replace("'"," ",$Fichier);
	$LesPiecesJointes[0]['NbLig']=0;
 
	if(is_uploaded_file($FichierTemp) && $Erreur==0){
 
		$TailleFichier=$_FILES['Fichier']['size'];
 
		$NomFichierEcriture = $CheminEcriturePJ.$NomDestinat;
		$NomFichierLecture = $CheminLecturePJ.$NomDestinat;
 
		if($TailleFichier > $TailleMax){
			$RaisonNonSauvergarde=$MonVraiFichier.'<br/>Ce type de fichier est trop gros '.$TailleFichier.' (maximum '.$TailleMax.' Octets) !';
		}
		else{
			//déplacement au bon endroit
			move_uploaded_file($FichierTemp , $NomFichierEcriture);
 
			// a-t-il réellement été copié ?
			if(file_exists($NomFichierEcriture)) echo '............Fichier transféré';
			else echo '............Fichier NON-transféré.';
 
	}//if(is_uploaded_file($_FILE['Fichier']['tmp_name']))

Je veux proposer un chargement via drag drop en pouvant sélectionner plusieurs fichiers.
Il y a de nombreux exemples pour cela, mais sur mon exemple, alors que tout semble se dérouler normalement, rien n'est chargé.

Nom : TestDragDrop.jpg Affichages : 1494 Taille : 84,6 Ko

fichier index.html
Code html : 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
35
36
37
38
<?php
        require_once "Fonctions.php";
        require_once "Connexion.php";
 
echo $CheminEcriTempo;
?>
<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 Drag and Drop Multiple File Uploader | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
     </head>
    <body>
        <header tabindex="0">
            <h2>HTML5 Drag and Drop Multiple File Uploader</h2>
            <a  href="http://www.script-tutorials.com/html5-drag-and-drop-multiple-file-uploader/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
 
        <div class="container">
            <div class="contr"><h2>Drag and Drop your images to 'Drop Area' (up to 5 files at a time, size - under 256kb)</h2></div>
            <div class="upload_form_cont">
                <div id="dropArea">Drop Area</div>
 
                <div class="info">
                    <div>Files left: <span id="count">0</span></div>
                    <div>Destination url: 
                    	<input id="url" value="..../DragDrop/upload.php"/>
                    </div>
                    <h2>Result:</h2>
                    <div id="result"></div>
                    <canvas width="500" height="20"></canvas>
                </div>
            </div>
        </div>
        <script src="js/script.js"></script>
    </body>
</html>

fichier script.js
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
// variables
var dropArea = document.getElementById('dropArea');
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
var count = document.getElementById('count');
var destinationUrl = document.getElementById('url');
var result = document.getElementById('result');
var list = [];
var totalSize = 0;
var totalProgress = 0;
 
// main initialization
(function(){
 
    // init handlers
    function initHandlers() {
        dropArea.addEventListener('drop', handleDrop, false);
        dropArea.addEventListener('dragover', handleDragOver, false);
    }
 
    // draw progress
    function drawProgress(progress) {
        context.clearRect(0, 0, canvas.width, canvas.height); // clear context
 
        context.beginPath();
        context.strokeStyle = '#4B9500';
        context.fillStyle = '#4B9500';
        context.fillRect(0, 0, progress * 500, 20);
        context.closePath();
 
        // draw progress (as text)
        context.font = '16px Verdana';
        context.fillStyle = '#000';
        context.fillText('Progress: ' + Math.floor(progress*100) + '%', 50, 15);
    }
 
    // drag over
    function handleDragOver(event) {
        event.stopPropagation();
        event.preventDefault();
 
        dropArea.className = 'hover';
    }
 
    // drag drop
    function handleDrop(event) {
        event.stopPropagation();
        event.preventDefault();
 
        processFiles(event.dataTransfer.files);
    }
 
    // process bunch of files
    function processFiles(filelist) {
        if (!filelist || !filelist.length || list.length) return;
 
        totalSize = 0;
        totalProgress = 0;
        result.textContent = '';
 
        for (var i = 0; i < filelist.length && i < 5; i++) {
            list.push(filelist[i]);
            totalSize += filelist[i].size;
        }
        uploadNext();
    }
 
    // on complete - start next file
    function handleComplete(size) {
        totalProgress += size;
        drawProgress(totalProgress / totalSize);
        uploadNext();
    }
 
    // update progress
    function handleProgress(event) {
        var progress = totalProgress + event.loaded;
        drawProgress(progress / totalSize);
    }
 
    // upload file
    function uploadFile(file, status) {
 
        // prepare XMLHttpRequest
        var xhr = new XMLHttpRequest();
        alert("destinationUrl.value="+destinationUrl.value);
        xhr.open('POST', destinationUrl.value);
        xhr.onload = function() {
            result.innerHTML += this.responseText;
            handleComplete(file.size);
        };
        xhr.onerror = function() {
            result.textContent = this.responseText;
            handleComplete(file.size);
        };
        xhr.upload.onprogress = function(event) {
            handleProgress(event);
        }
        xhr.upload.onloadstart = function(event) {
        }
 
        // prepare FormData
        var formData = new FormData();  
        formData.append('myfile', file); 
        xhr.send(formData);
    }
 
    // upload next file
    function uploadNext() {
        if (list.length) {
            count.textContent = list.length - 1;
            dropArea.className = 'uploading';
 
            var nextFile = list.shift();
            if (nextFile.size >= 262144) { // 256kb
                result.innerHTML += '<div class="f">Too big file (max filesize exceeded)</div>';
                handleComplete(nextFile.size);
            } else {
                uploadFile(nextFile, status);
            }
        } else {
            dropArea.className = '';
        }
    }
 
    initHandlers();
})();
fichier upload.php
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
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
40
41
42
43
<?php
require_once "Fonctions.php";
require_once "Connexion.php";
 
// set error reporting level
if (version_compare(phpversion(), '5.3.0', '>=') == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);
 
function bytesToSize1024($bytes, $precision = 2) {
    $unit = array('B','KB','MB');
    return @round($bytes / pow(1024, ($i = floor(log($bytes, 1024)))), $precision).' '.$unit[$i];
}
 
if (isset($_FILES['myfile'])) {
    $sFileName = $_FILES['myfile']['name'];
    $sFileType = $_FILES['myfile']['type'];
    $sFileSize = bytesToSize1024($_FILES['myfile']['size'], 1);
 
    echo <<<EOF
<div class="s">
    <p>Your file: {$sFileName} has been successfully received.</p>
    <p>Type: {$sFileType}</p>
    <p>Size: {$sFileSize}</p>
</div>
EOF;
 
   		$NomFichierEcriture = $CheminEcriTempo.$sFileName;
    		$NomFichierLecture = $CheminLectTempo.$sFileName;
 
    		//déplacement au bon endroit
    		move_uploaded_file($sFileName , $NomFichierEcriture);
 
    		// a-t-il réellement été copié ?
    		if(file_exists($NomFichierEcriture)) echo '<br/>............Fichier transféré';
    	        else echo '<br/>............Fichier NON-transféré.';
 
 
} 
else echo '<div class="f">An error occurred</div>';
 
?>

Je ne vois pas ce qui cloche.
Est-ce que le fichier est réellement chargé sur le serveur mais dans un répertoire où je n'ai pas accès ?

Avez-vous des idées ?