Basit jQuery ilerleme çubuğu yüzdesi

Dosya yüklememe ilerleme yüzdesinin nasıl ekleneceğine ilişkin temel bilgileri gösteren basit bir öğretici bulmaya çalışıyorum, dosya yükleme bölümümü zaten oluşturdum, böylece bir eklenti istemiyorum Her ikisiyle de birlikte geliyor, ilerleme çubuğunu kendim kodlayabiliyorum, ancak bunun nasıl yapılacağı konusunda yardıma ihtiyacım var. Nasıl çalıştığını öğrenmek istiyorum, sadece benim için her şeyi yapan bir eklenti istemiyorum.Basit jQuery ilerleme çubuğu yüzdesi

Herhangi bir yardım çok takdir edilecektir, teşekkürler!

Sadece yükleme çubuğunun kendisinden değil, dosya yükleme yüzdesinin nasıl alınacağıyla ilgileniyorum. Doğru bir yüzdeye sahip olmak istiyorum.

kaynak

2012-08-26 Dylan Cross

Buraya bak:

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

bu deneyin: -

bu benim html kodu

<!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>

benim php kodu

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

kaynak

2012-08-26 16:57:08

Bu benim test kodum. Yüzde ilerleme çubuğu ile dosya yükleme. dene. –

SAVIOR. Bu cevap 3 gün süren sürekli mücadeleden sonra beni kurtardı. Çok teşekkürler bhaijaan Abid. – trollster

@IliaRostovtsev, bağlantıyı olduğu kadar kodun da gönderildiği tüm nokta, bağlantının kullanılamaması (geçici ya da kalıcı olarak), insanların bu siteye bakması ve kullanması için hala mevcut. Bağlantıları sadece cevap olarak göndermeyin, her zaman kodu sağlayın. – TheCarver

Lütfen bir göz atın, bunu yararlı bulursun. Bu jQuery ve yükleme komut dosyanız için istediğiniz gibi ilerleme yüzdesi var!

Live Demo jsFiddle

daha karmaşık bir örnek öğrenmek istiyorsanız, Uber Uploader denilen tavsiye ederim güvenilir senaryo,
vardır - bu jQuery ve PHP bulunuyor.

kaynak

2012-08-26 17:01:11

Basit jQuery ilerleme çubuğu yüzdesi

cevap

İlgili konular