Téléchargement multiple de fichiers en drag & drop

**ulmeen** · 13/10/2017, 14h36

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

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 ?

**mathieu** · 13/10/2017, 19h16

le 1er argument de move_uploaded_file doit être le contenu de $_FILES[...]["tmp_name"] et non "name"
http://php.net/move_uploaded_file

**ulmeen** · 16/10/2017, 09h23

Merci Mathieu
Effectivement, c'était une mauvaise recopie.
Merci bien pour le coup d'oeil

**ABCIWEB** · 16/10/2017, 20h53

Pour info, pour des plus gros besoins tu pourrais utiliser ce module d'upload. Cela dit, celui que tu utilises est très bien fait et suffisant pour des petits fichiers (j'aurais juste ajouté un token pour renforcer le lien entre le formulaire et le code d'upload php mais bon...).

Téléchargement multiple de fichiers en drag & drop

AJAX

Vue hybride

Discussions similaires

Partager

Partager