8791 sujets

Développement web côté serveur, CMS

Progress Bar uploads

Bonjour à tous,

J'ai aussi poster sur javascript...
Je tente ici, c'est peut-être plus adéquat ici...
.
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 qui en parlait,
mais ce post est resté sans fin.

Pouvez-vous m'aider, je ne connais rien de perl ni de flash.
Que faire ? N'est-ce vraiment pas possible en javascript ???
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>
Sujet clos
Aller à