Prosty procent paska postępu jQuery

Próbowałem znaleźć prosty samouczek, który pokazuje, w jaki sposób dodać procent postępu w moim przesyłaniu plików, Mam już zbudowaną część pobierania plików, więc nie chcę wtyczki, która pochodzi z obu, chcę mieć możliwość kodowania paska postępu, ale potrzebuję pomocy, jak to zrobić. Chcę się dowiedzieć, jak to działa, nie chcę tylko wtyczki, która zrobi to za mnie.Prosty procent paska postępu jQuery

Każda pomoc będzie bardzo ceniona, dzięki!

Po prostu interesuje mnie, jak zdobyć procent przesyłu pliku, a nie na samym pasku postępu. Chcę mieć dokładny procent.

Źródło

2012-08-26 Dylan Cross

Spójrz tutaj:

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

Spróbuj tego: -

to jest mój kod 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>

mojego kodu 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!"; 
} 
?>

Źródło

2012-08-26 16:57:08

To jest mój przetestowany kod. Przesyłanie pliku z procentowym paskiem postępu. Spróbuj. –

SAVIOR. Ta odpowiedź uratowała mnie po 3 dniach ciągłej walki. Wielkie dzięki bhaijaan Abid. – trollster

@IliaRostovtsev, cały kod księgowania, a także link, jest taki, że jeśli łącze staje się niedostępne (tymczasowo lub na stałe), kod jest nadal dostępny na tej stronie, aby ludzie mogli go przeglądać i używać. Nie publikuj linków jako odpowiedzi, zawsze podawaj kod. – TheCarver

Proszę spojrzeć, myślę, że ta pomoc okaże się pomocna. To jQuery i ma procent postępu, tak jak chciałeś dla swojego skryptu przesyłania!

Live Demo jsFiddle

Jeśli chcesz dowiedzieć się bardziej skomplikowany przykład, nie jest wiarygodny scenariusz Polecam,
nazywa Uber Uploader - to jQuery i PHP.

Źródło

2012-08-26 17:01:11

Prosty procent paska postępu jQuery

Odpowiedz

Powiązane problemy