Upload avec barre de progression, comment faire ???

Question

jytest

12 Oct 2010 à 14:28

Bonjour à touq.
J'ai une page html qui est chargée de uploader des fichiers "uploads.html".
Tout fonctionne bien... Par contre, je voudrais faire le difficile,
en rajoutant une véritable barre de progression (avec pourcentage en plus du défilement)
dans (oui, dans) la zone "inputtext" de chaque fichier à uploader.
Pour la simplifaication du code, je me suis contenté de 2 fichiers à uploader.

J'ai lu que cela ne se faisait pas sur php, ni en javascript...
J'ai lu que cela se faisait en Perl ou en flash...
J'ai tout lu sur google, des fois possibles, des fois pas possibles.

Qui croire ? Que faire ?
Je viens aussi de relever sur alsacreations un post récent qsui en parler,
mais ce post est resté sans fin.

Pouvez-vous m'aider, je ne connais rien de perl ni de flash.
Que faire ?
A l'aide....

D'avance, je vous remercie tous et toutes pour le temps
que vous prendrez à bien vouloir m'aider.

Voici "uploads.html" :

<html>
<head>
...
<style>
...
#journee {
height: 16px;
width: 300px;
position: absolute;
z-index: 3;
left: 550px;
top: 172px;
font-size: 11px;
text-align: right;
}
#heure {
height: 16px;
width: 50px;
position: absolute;
z-index: 3;
left: 855px;
top: 172px;
font-size: 11px;
font-style: normal;
text-align: left;
}
#detail {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
height: 300px;
width: 845px;
position: absolute;
z-index: 40;
left: 60px;
top: 260px;
padding: 5px;
}
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
width: 570px;
}
-->
</style>
...
<script type="text/javascript">

</script>
<link href="css/menu.css" rel="stylesheet" type="text/css" media="all">
</head>

<body onload = "date_heure()">
<div id="site">
<div id="contenu">
<div id="detail">
<form name="form1" method="post" action="php/fileupload.php" enctype="multipart/form-data">
<table width="845" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="145" height="27">Fichier 01</td>
<td width="700" height="27">
<div class="fileinputs">
<input type="file" id="file01" class="file" onchange="getfile01();" >
<div class="fakefile">
<input type="text" id="filevisible01" class="filevisible" size="75" style="vertical-align: middle">
<img src="images/parcourir01_on.gif" width="127" height="20" style="vertical-align: middle"/></div> </div></td>
</tr>
<tr>
<td width="145" height="27">Fichier 02</td>
<td width="700" height="27">
<div class="fileinputs">
<input type="file" id="file02" class="file" onchange="getfile02();" >
<div class="fakefile">
<input type="text" id="filevisible02" class="filevisible" size="75" style="vertical-align: middle">
<img src="images/parcourir02_on.gif" width="127" height="20" style="vertical-align: middle"/></div> </div></td>
</tr>
<tr>
<td width="145" height="27"> </td>
<td width="700"><input type="submit" name="envoi" id="envoi" value="Envoyer"></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>

Blinkers

12 Oct 2010 à 15:32

Je te conseil de regarder avec le plugin : http://www.uploadify.com
Il fonctionne avec le framework jQuery.
Et il utilise le flash pour indiquer la progression et le pourcentage de l'upload.

Tony Monast

Modérateur

12 Oct 2010 à 16:43

Bonjour jytest,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

jytest

12 Oct 2010 à 17:31

Bonjour à tous,
J'ai une page html qui est chargée de uploader des fichiers "uploads.html".
Tout fonctionne bien... Par contre, je voudrais faire le difficile,
en rajoutant une véritable barre de progression (avec pourcentage en plus du défilement)
dans (oui, dans) la zone "inputtext" de chaque fichier à uploader.
Pour la simplifaication du code, je me suis contenté de 2 fichiers à uploader.

J'ai lu que cela ne se faisait pas sur php, ni en javascript...
J'ai lu que cela se faisait en Perl ou en flash...
J'ai tout lu sur google, des fois possibles, des fois pas possibles.

Qui croire ? Que faire ?
Je viens aussi de relever sur alsacreations un post récent qsui en parler,
mais ce post est resté sans fin.

Pouvez-vous m'aider, je ne connais rien de perl ni de flash.
Que faire ?
A l'aide....

D'avance, je vous remercie tous et toutes pour le temps
que vous prendrez à bien vouloir m'aider.

Voici "uploads.html" :


<html>
<head>
...
<style>
...
#journee {
	height: 16px;
	width: 300px;
	position: absolute;
	z-index: 3;
	left: 550px;
	top: 172px;
	font-size: 11px;
	text-align: right;
}
#heure {
	height: 16px;
	width: 50px;
	position: absolute;
	z-index: 3;
	left: 855px;
	top: 172px;
	font-size: 11px;
	font-style: normal;
	text-align: left;
}
#detail {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 14px;
	height: 300px;
	width: 845px;
	position: absolute;
	z-index: 40;
	left: 60px;
	top: 260px;
	padding: 5px;
}
div.fileinputs {
	position: relative;
}
div.fakefile {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}
input.file {
	position: relative;
	text-align: right;
	-moz-opacity:0;
    filter:alpha(opacity: 0); 
	opacity: 0;
	z-index: 2;
	width: 570px;
}
-->
</style>
...
<script type="text/javascript">
<!--
function date_heure() {
    var infos = new Date();
    //Heure
    document.getElementById('heure').innerHTML = compZero(infos.getHours()) + ':' + compZero(infos.getMinutes()) + ':' + compZero(infos.getSeconds());
    //Date
    var mois = new Array('janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre');
    var jours = new Array('dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi');
    document.getElementById('journee').innerHTML = 'Nous sommes le ' + jours[infos.getDay()] + ' ' + infos.getDate() + ' ' + mois[infos.getMonth()] + ' ' + infos.getFullYear() + ' à';
   setInterval("date_heure()", 1000); //Actualisation de l'heure
}
function getfile01() {
	document.getElementById('filevisible01').value=document.getElementById('file01').value;
}
function getfile02() {
	document.getElementById('filevisible02').value=document.getElementById('file02').value;
}
//-->
</script>
<link href="css/menu.css" rel="stylesheet" type="text/css" media="all">
</head>

<body onload = "date_heure()">
<div id="site">
  <div id="contenu">
    <div id="detail">
      <form name="form1" method="post" action="php/fileupload.php" enctype="multipart/form-data">
        <table width="845" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="145" height="27">Fichier 01</td>
            <td width="700" height="27">
        <div class="fileinputs">
            <input type="file" id="file01" class="file" onchange="getfile01();" > 
            <div class="fakefile"> 
            <input type="text" id="filevisible01" class="filevisible" size="75" style="vertical-align: middle">
            <img src="images/parcourir01_on.gif" width="127" height="20" style="vertical-align: middle"/></div>            </div></td>
          </tr>
          <tr>
            <td width="145" height="27">Fichier 02</td>
            <td width="700"  height="27">
        <div class="fileinputs">
            <input type="file" id="file02" class="file" onchange="getfile02();" > 
            <div class="fakefile"> 
            <input type="text" id="filevisible02" class="filevisible" size="75" style="vertical-align: middle">
            <img src="images/parcourir02_on.gif" width="127" height="20" style="vertical-align: middle"/></div>            </div></td>
          </tr>
          <tr>
            <td width="145" height="27">&nbsp;</td>
            <td width="700"><input type="submit" name="envoi" id="envoi" value="Envoyer"></td>
          </tr>
        </table>
      </form>
    </div>
  </div>
</div>
</body>
</html>

Tony Monast

Modérateur

12 Oct 2010 à 17:33

À noter que tu pouvais éditer ton premier message, plutôt que de l'envoyer à nouveau. Smiley cligne

jytest

12 Oct 2010 à 18:50

Peut-être une réponse après ces corrections ???

jytest

12 Oct 2010 à 18:51

Désolé pour ne pas avoir éditer le message,
Cela ne fonctionnait pas...
J'ai reçu un message...
d'édition impossible !!!

jytest

12 Oct 2010 à 18:54

Voici exactement le message renvoyé :

[#darkblue]
Ce document a été placé hors-ligne.
[/#]

Tony Monast

Modérateur

12 Oct 2010 à 19:10

jytest a écrit :
Peut-être une réponse après ces corrections ???

Pour ma part, j'irais dans le même sens que Blinkers, c'est-à-dire se tourner vers une solution existante. Je pense notamment à SWFUpload (voir les démonstrations).

Il se personnalise très bien et prend en charge tout ce dont tu as besoin, et même davantage comme l'upload de plusieurs fichiers en même temps.

jytest

12 Oct 2010 à 21:15

J'ai téléchargé...
mais comment intégrer cela dans mon upload.php ?
Aidez-moi svp.

Voici le code php


]<?php
	date_default_timezone_set('Europe/Brussels');
	
	$extensionsAutorisees = array("ai", "ind", "png", "psd", "eps", "bmp", "gif", "jpg", "jpeg", "tif", "tiff", "txt", "tmp", "swf", "pdf", "doc", "docx", "xls", "xlsx", "ppt", "pptx", "xml", "rar", "zip");
	$nomOrigine = $_FILES['monfichier']['name'];
	$elementsChemin = pathinfo($nomOrigine);
	$extensionFichier = $elementsChemin['extension'];
	
	if (!(in_array($extensionFichier, $extensionsAutorisees))) {
		echo "Le fichier n'a pas l'extension attendue";
	} else {    
		// Copie dans le repertoire du script avec un nom
		// incluant l'heure a la seconde pres 
		$repertoireDestination = dirname(__FILE__)."/";
		$nomDestination = "fichier_du_".date("YmdHis").".".$extensionFichier;
	
		if (move_uploaded_file($_FILES["monfichier"]["tmp_name"], 
										 $repertoireDestination.$nomDestination)) {
			echo "Le fichier temporaire ".$_FILES["monfichier"]["tmp_name"].
					" a été déplacé vers ".$repertoireDestination.$nomDestination;
		} else {
			echo "Le fichier n'a pas été uploadé (trop gros ?) ou ".
					"Le déplacement du fichier temporaire a échoué".
					" vérifiez l'existence du répertoire ".$repertoireDestination;
		}
	}
?>

Sujet clos