JQuery Simple barre de progression en pourcentage

J'ai essayé de trouver un tutoriel simple qui montre les rudiments de la façon d'ajouter un pourcentage de la progression de mon upload de fichier, j'ai déjà construit mon upload de fichier de la partie donc je ne veux pas d'un plugin qui vient avec, je veux être capable de coder la barre de progression de moi, mais j'ai besoin d'aide sur la façon de le faire. Je veux apprendre comment il fonctionne, je ne veux pas d'un plug-in qui fait tout pour moi.

Toute aide serait grandement appréciée, merci!

Je suis seulement intéressé par la façon d'obtenir le pourcentage de l'upload de fichier, pas vraiment sur la barre de progression elle-même. Je veux être en mesure d'avoir une idée précise de pourcentage.

OriginalL'auteur Dylan Cross | 2012-08-26

  1. 14

    Regardez ici:

    http://jquery.malsup.com/form/progress.html

    Essayez ceci:-

    c'est mon code html

    <!doctype html>
<head>
<title>File Upload Progress Demo #1</title>
<style>
body { padding: 30px }
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
</head>
<body>
<h1>File Upload Progress Demo #1</h1>
<code>&lt;input type="file" name="myfile"></code>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="uploadedfile"><br>
<input type="submit" value="Upload File to Server">
</form>
<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
<div id="status"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
(function() {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('form').ajaxForm({
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
bar.width("100%");
percent.html("100%");
status.html(xhr.responseText);
}
}); 
})();       
</script>
</body>
</html>

    mon code php

    <?php
$target_path = "uploads/";
$target_path = $target_path . basename( $_FILES['uploadedfile']['name']); 
if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) {
echo "The file ".  basename( $_FILES['uploadedfile']['name']). 
" has been uploaded";
} else{
echo "There was an error uploading the file, please try again!";
}
?>
    C'est mon code à tester. Upload de fichier avec le pourcentage de la barre de progression. essayez-la.
    SAUVEUR. Cette réponse m'a sauvé après 3 jours de lutte continue. Merci beaucoup bhaijaan Abid.
    le point de l'ensemble de poster du code ainsi que le lien, c'est que si le lien est indisponible (temporairement ou définitivement) le code est toujours disponible sur ce site pour les gens à regarder et à utiliser. Ne pas poster des liens que les réponses, toujours à fournir le code.
    Je suis d'accord sur ce que vous avez dit et à l'époque, je ne me souviens pas maintenant, exactement ce que je voulait dire, mais il n'est pas question de proposer l'idée de l'affichage des codes comme lien externe. Il était inutile exemples de la façon d'inclure jQuery, je pense..
    oh ok, my bad! 🙂

    OriginalL'auteur Abid Hussain

  2. 3

    Veuillez jeter un oeil, je pense que vous trouverez ce un utile. C'est jQuery, et il a le pourcentage de la progression, tout comme vous vouliez pour votre script d'upload!

    Démonstration en direct jsFiddle

    Si vous voulez en savoir plus compliquée exemple, il est fiable script je le recommande,
    appelé Uber Uploader - c'est jQuery et PHP.

    OriginalL'auteur Ilia Rostovtsev