1 pièce(s) jointe(s)
Téléchargement multiple de fichiers en drag & drop
Bonjour
Jusqu'à présent, je propose sur mes sites de charger des fichiers en passant par un formulaire
Formulaire :
Code:
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:
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é.
Pièce jointe 319148
fichier index.html
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
| <?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:
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:
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 ?
