Einfache jQuery Fortschrittsbalken Prozentsatz

Ich habe versucht, ein einfaches Tutorial zu finden, das die Grundlagen zeigt, wie Sie einen Fortschrittsprozentsatz zu meinem Dateiupload hinzufügen, ich habe bereits meinen Dateiupload Teil gebaut, so dass ich kein Plugin das will kommt mit beiden, ich möchte in der Lage sein, den Fortschrittsbalken selbst zu programmieren, aber ich brauche etwas Hilfe, wie man das macht. Ich möchte lernen, wie es funktioniert, ich möchte nicht nur ein Plugin, das alles für mich tut.Einfache jQuery Fortschrittsbalken Prozentsatz

Jede Hilfe wäre sehr dankbar, danke!

Ich bin nur daran interessiert, wie Sie den Prozentsatz der Datei hochladen, nicht wirklich auf dem Fortschrittsbalken selbst. Ich möchte in der Lage sein, einen genauen Prozentsatz zu haben.

Quelle

2012-08-26 Dylan Cross

Schau mal hier:

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

Try this: -

das ist mein HTML-Code

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

meine PHP-Code

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

Quelle

2012-08-26 16:57:08

Dies ist mein getesteter Code. Dateiupload mit prozentualer Fortschrittsanzeige Versuch es. –

RETTER. Diese Antwort hat mich nach 3 Tagen ununterbrochenem Kampf gerettet. Vielen Dank bhaijaan Abid. – trollster

@IliaRostovtsev, der ganze Punkt der Buchung Code sowie der Link ist, wenn der Link nicht verfügbar (vorübergehend oder dauerhaft) der Code ist immer noch auf dieser Website für die Menschen zu sehen und zu verwenden. Veröffentlichen Sie nicht nur Links als Antworten, sondern geben Sie immer den Code an. – TheCarver

Bitte werfen Sie einen Blick, ich denke, Sie werden diese eine hilfreich finden. Es ist jQuery und es hat Fortschrittsprozentsatz, genau wie Sie für Ihr Upload-Skript wollten!

Live Demo jsFiddle

Wenn Sie komplizierteres Beispiel lernen wollen, gibt es zuverlässige Skript, das ich empfehlen würde,
Uber Uploader genannt - es ist jQuery und PHP.

Quelle

2012-08-26 17:01:11

Einfache jQuery Fortschrittsbalken Prozentsatz

Antwort

Verwandte Themen