Witajcie, jestem tutaj nowy i dziękuję za możliwość skorzystania z tego forum.
Piszę właśnie prostą stronę (z pomocą tutoriali), której głównym zadaniem miałoby być wysyłanie plików na serwer strony internetowej. Przejrzałem większość i ten akurat mi się spodobał. Wszystko działa jak należy, niestety problem napotkałem podczas wysyłania pliku. Owszem plik jest wysyłany, lecz niestety przeglądarka nie pokazuje ile % zostało wysłane w specjalnie wydzielonej sekcji bar, statusbar (kod HTML,CSS). Wynik jest taki, że przeglądarka plik wysyła, ale pasek z procentami już się nie pokazuje (a powinien), widzę tylko ten który pojawia się domyślnie w lewym dolnym rogu okna przeglądarki.

Stawiam na problem z kodem Javascript. Pewnie jest coś z nim nie tak, dlatego wolałem się dopytać kogoś doświadczonego z prośbą o pomoc w jego naprawieniu.
Pozdrawiam.


Kod skryptu wysyłającego plik na serwer:
CODE
<?php
if($_SERVER['REQUEST_METHOD']=='POST'){
$file = $_FILES['file']['tmp_name'];
$name = $_FILES['file']['name'];
$path = 'uploads/';
move_uploaded_file($file,$path.$name);
echo 'File Uploaded Successfully';
}
?>


Kod strony, dzięki której użytkownik będzie mógł wysłać plik:

CODE
<!DOCTYPE html>
<html>
<head>
<title>File Upload</title>
<script src="https://code.jquery.com/jquery-2.2.0.js" integrity="sha256-oYqpLeqZe9cetUDV+TFiBZHp3uJ+X4F5eLs4W6uSTSE=" crossorigin="anonymous"></script>
<script src="http://malsup.github.com/min/jquery.form.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<h1 style="text-align:center; color:#fff; margin-top:60px; font-size:50px">File Upload With Progress Bar</h1>
<p style="text-align:center; color:#fff; margin-top:60px; font-size:24px">Without Page Refresh</p>

<div class="formarea">

<form method="post" action="upload.php" enctype="multipart/form-data">
<input type="file" name="file"/>
<button>Upload</button>
</form>

<div id="bararea">
<div id="bar"></div>
</div>

<div id="percent"></div>
<div id="status"></div>

</div>

<script>
$(function() {
$(document).ready(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 + '%';
percent.html(percentVal);
bar.width(percentVal);
},
complete: function(xhr) {
status.html(xhr.responseText);
}
});
});
});
</script>
</body>
</html>


Arkusz styli:

CODE
body{
font-size:120%;
line-height:2;
font-family:calibri;
}
.formarea{
width:60%;
margin:0 auto;
background-color:#fff;
text-align:center;
padding:4%;
border-radius:5px;
}

#bararea{
width:100%;
height:40px;
border:2px solid #000;
}

#bar{
width:0%;
margin:4px 0;
height:32px;
background-color:tomato;
}

#percent{
width:0%;
margin:4px 0;
height:32px;
background-color:tomato;
}

#status{
color:#000;
}