Barre de progression JQUERY UI
barale61
Messages postés
1214
Date d'inscription
Statut
Membre
Dernière intervention
-
barale61 Messages postés 1214 Date d'inscription Statut Membre Dernière intervention -
barale61 Messages postés 1214 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'aimerais savoir si un d’entre vous a réussi à faire fonctionner la barre progression car je n'y arrive pas et si on veut essayer, le lien du cours pour tester est erroné ou n'existe plus. Mon upload php fonctionne bien, mais la barre ne s'affiche pas.
Je me permets de poster et le jquery est en bas de page.
Je vous remercie de votre aide.
J'aimerais savoir si un d’entre vous a réussi à faire fonctionner la barre progression car je n'y arrive pas et si on veut essayer, le lien du cours pour tester est erroné ou n'existe plus. Mon upload php fonctionne bien, mais la barre ne s'affiche pas.
Je me permets de poster et le jquery est en bas de page.
Je vous remercie de votre aide.
<?php
include 'upload.php';
if (isset($_POST['envoyer']))
{
$photo = $_FILES['fichier']['name'];
$photo_tmp = $_FILES['fichier']['tmp_name'];
$taille_maxi = 10485760;
$taille_finale = $taille_maxi / 1000000;
$taille = filesize($_FILES['fichier']['tmp_name']);
$errors = array();
if (!empty($photo_tmp))
{
$image=explode('.',$photo);
$image_ext=end($image);
if(in_array(strtolower($image_ext),array('png','jpg','jpeg','gif')) === false){
$errors[] = "<div class=\"card\">
<div class=\"card-content red white-text col s12 m12 l4\">
Le type d'image (<b>.".$image_ext."</b>) n'est pas valide. Seules les extensions .png, .jpg, .jpeg, et .gif sont autorisées !
</div>
</div>";
}
if($taille>$taille_maxi){
$errors[] = "<div class=\"card\">
<div class=\"card-content red white-text col s12 m12 l4\">
L'image <b>" .$photo." </b>est trop volumineuse le maximum autorisé est de <b>" .round($taille_finale). " Mo</b>
</div>
</div>";
}
}
if (empty($errors)){
upload($photo_tmp);
}
else{
foreach($errors as $error)
{
// On crée la session avant d'afficher l'erreur
$_SESSION['mon_tableau'] = array($_POST['denomination'],$_POST['contact'],$_POST['adresse'],$_POST['cp'],$_POST['ville'],$_POST['email'],$_POST['telephone'],$_POST['portable'],$_POST['commentaire']);
echo $error;
}
}
}
?>
<!doctype html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/materialize.css" media="screen,projection"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body>
<div class="row">
<div class="col s12 m12 l6">
<div class="row">
<form action="" method="post" name="frm" id="frm" enctype="multipart/form-data" class="col s12">
<div class="file-field input-field">
<div class="btn btn-block blue">
<span>Fichiers</span>
<!--<input type="hidden" name="MAX_FILE_SIZE" value="10485760">-->
<input type="file" name="fichier" id="fichier">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Téléchargez des fichiers">
</div>
</div>
<div class="row">
<div class="input-field col s12 m6 l8">
<button class="btn btn-block blue" id="envoyer" name="envoyer" type="submit">Envoyer<i class="material-icons right">send</i></button>
</div>
<div class="progress"></div>
<script>
var inputElement = $('#fichier');
inputElement.change(function(){
var files = inputElement.attr('files');
var file = files[0];
var xhr = new XMLHttpRequest();
$('#progress').progressbar({ value: 0 }); // on initialise le plugin
xhr.open('POST', 'upload.php');
xhr.onprogress = function(e){
var loaded = Math.round((e.loaded / e.total) * 100); // on calcul le pourcentage de progression
$('#progress').progressbar('value', loaded);
}
xhr.onload = function(){
$('#progress').progressbar('value', 100);
}
var form = new FormData();
form.append('fichier', inputElement.file);
xhr.send(form);
});
</script>
</form></div></div></div></body></html>
A voir également:
- Barre de progression JQUERY UI
- One ui - Guide
- Windows 11 barre des taches a gauche - Guide
- Barre de défilement - Guide
- Barré whatsapp - Guide
- Barre verticale mac - Forum MacOS
1 réponse
J'ai modifié comme ceci et quand je sélectionne une image ma barre s'affiche bien mais ne défile pas. Il y en a bien ici qui ont fait ce cours?
Ligne 6, j'obtient le résultat "undefined".
Ligne 6, j'obtient le résultat "undefined".
var inputElement = $('#fichier');
inputElement.change(function(){
var files = inputElement.attr('files');
/*var file = files[0];*/
var file = files;
console.log(file);
var xhr = new XMLHttpRequest();
$('#barre').progressbar({ value: 0 }); // on initialise le plugin
xhr.open('POST', 'upload.php');
xhr.onprogress = function(e){
var loaded = Math.round((e.loaded / e.total) * 100); // on calcul le pourcentage de progression
console.log(loaded);
$('#barre').progressbar('value', loaded);
}
xhr.onload = function(){
$('#barre').progressbar('value', 100);
}
var form = new FormData();
form.append('fichier', inputElement.file);
xhr.send(form);
});
