W jaki sposób zrobić progress bar w jquery i podpiąć pod upload plików

Question

Tak jak w temacie wiem że potrzeba taga progresbar +css ale jak napisać skrypt jak bd wyglądał przykładowy skrypt do tego.

Answer 1

Problem polega na tym, że lepiej nie robić tego w jQuery, tylko przy użyciu czystego obiektu XMLHttpRequest, który posiada własność progress (a nawet taki event rzuca).

Comments

a pomożesz mi to połączyć z skryptem upload

<form action="upload.php" method="post" enctype="multipart/form-data">
  <p class="nazwa">  Wybierz muzykę do przesłania:</p>
    <input type="file" class="btn_input" name="fileToUpload"/>
	
    <input type="submit" value="Wyślij" class="btn" name="submit"/>
	 </form>

 

---

A masz już jakiś kod JS?

---

np  tak jak na stronie co jest tutaj

a przykladowy skrypt

function uploadFiles(url, files) {
  var formData = new FormData();

  for (var i = 0, file; file = files[i]; ++i) {
    formData.append(file.name, file);
  }

  var xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  xhr.onload = function(e) { ... };

  xhr.send(formData);  // multipart/form-data
}

document.querySelector('input[type="file"]').addEventListener('change', function(e) {
  uploadFiles('/server', this.files);
}, false);

fragment tego

Uploading a file or blob: xhr.send(Blob)

We can also send File or Blob data using XHR. Keep in mind all Files are Blobs, so either works here.

This example creates a new text file from scratch using the Blob() constructor and uploads that Blob to the server. The code also sets up a handler to inform the user of the upload's progress:

<progress min="0" max="100" value="0">0% complete</progress>

function upload(blobOrFile) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.onload = function(e) { ... };

  // Listen to the upload progress.
  var progressBar = document.querySelector('progress');
  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      progressBar.value = (e.loaded / e.total) * 100;
      progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.
    }
  };

  xhr.send(blobOrFile);
}

upload(new Blob(['hello world'], {type: 'text/plain'}));

link do tego fragmentu

http://www.html5rocks.com/en/tutorials/file/xhr2/#toc-send-blob

---

Przeczytać artek umiem… Pytam o to czy już coś próbowałem, bo na razie to wygląda tak, jakbyś mnie prosił o gotowca.

---

nie chodzi mi o gotowca bo wtedy nie nauczę się tylko nie wiem po której lini i gdzie wstawić ten kod czy do pliku upload.php czy tam gdzie mam formularz z wysyłaniem pliku a dodam że jak dałem tam gdzie mam formularz to nic nie odpalało(skrypt)przesyłanie nadal było, (za bardzo nie wiem jak to podpiąć pod skrypt tutaj  nie chcę wkejać to samo dwa razy.)

---

Do pliku z formularzem. Powinieneś odpalić to przy zdarzeniu submit

---

powiedż mi czy to dobrze robię

<?php 
include_once('gra.php');

?>
<?php
echo'<div id="odtwarzacz">';
echo'<video id="videoarea" controls="false" poster="" url="" autoplay></video>';
function rozszerzenie($plik){
    return pathinfo($plik,  PATHINFO_EXTENSION);
}
$path = "muzyka/"; 
$dir = new DirectoryIterator($path); 
foreach ($dir as $fileinfo) { 

$rozsz = rozszerzenie($fileinfo); 
 
//pobieramy dla przykładu tylko pliki z rozszerzeniem txt 
if($rozsz == "mp3"){ 
 
echo'<ul id="playlist">';

echo "<li><a href=muzyka/$fileinfo>$fileinfo</a>";

echo'<i class="icon-play" onclick="myFunction()"></i>';
echo'<i class="icon-pause off"></i>';

echo "</li>";

echo'</ul>';
 } 
 } 

echo' </div>';

?> 
<script>
$(document).ready(function(){

$("#playlist a").on("click", function() {
  
       var src = $(this).attr('href');
 
        $("#videoarea").attr("src", src);
        $("#videoarea").attr("poster", '');
        $("#videoarea").attr("autoplay", true);
		$("#videoarea").attr("controls", false);
    return false;
});

  
});

 </script>
 <script>
(function(){

    var i = 0,
        $pauseIcon = $('.icon-pause');

    $('a').click(function(){
        
        $pauseIcon.toggleClass("off", i);
        i = i === 1? 0 : 1;
        
    });
    
})();

</script>



<div style=clear:both;></div>
<div id="muzyka_upload">
<form action="upload.php" method="post" enctype="multipart/form-data">
  <p class="nazwa">  Wybierz muzykę do przesłania:</p>
    <input type="file" class="btn_input" name="fileToUpload"/>
	
    <input type="submit" value="Wyślij nam klip muzyczny " class="btn" name="submit"/>
	<progress min="0" max="100" value="0">0% complete</progress>
	  <p class="nazwa">Żeby plik się wyświetlił pod playerem usuń spację, apostrofy, podkreślenia, pauzy itp.</p>
	  <p class="nazwa" style="font-size:25px;">Tak powinien wyglądać plik do przesłania:<br/>nazwamuzyki.mp3<br/> a nie tak:<br /><span style="text-decoration:line-through; font-size:25px;">nazwa-muzyki_.mp3</span></p>
</form>
<script>
function submit(blobOrFile) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/server', true);
  xhr.onload = function(e) { ... };

  // Listen to the upload progress.
  var progressBar = document.querySelector('progress');
  xhr.submit.onprogress = function(e) {
    if (e.lengthComputable) {
      progressBar.value = (e.loaded / e.total) * 100;
      progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.
    }
  };

  xhr.send(blobOrFile);
}

submit(new Blob(['hello world'], {type: 'file'}));
</script>
</div>
</body></html>