[PHP][HTML][JavaScript]Przesyłanie plików na serwer

[PHP][HTML][JavaScript]Przesyłanie plików na serwer

matrix72 Zobacz profil	5.01.2021, 18:02:38 Post #1
Grupa: Zarejestrowani Postów: 1 Pomógł: 0 Dołączył: 5.01.2021 Ostrzeżenie: (0%)	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; }