Есть код загрузки одного файла с прогрессбаром.
CODE (javascript):
скопировать код в буфер обмена
скопировать код в буфер обмена
- <html>
- <head>
- <script>
- function _(el){
- return document.getElementById(el);
- }
- function uploadFile(){
- var file = _("file1").files[0];
- var formdata = new FormData();
- formdata.append("file1", file);
- var ajax = new XMLHttpRequest();
- ajax.upload.addEventListener("progress", progressHandler, false);
- ajax.addEventListener("load", completeHandler, false);
- ajax.addEventListener("error", errorHandler, false);
- ajax.addEventListener("abort", abortHandler, false);
- ajax.open("POST", "file_upload_parser.php");
- ajax.send(formdata);
- }
- function progressHandler(event){
- _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
- var percent = (event.loaded / event.total) * 100;
- _("progressBar").value = Math.round(percent);
- _("status").innerHTML = Math.round(percent)+"% upload... please wait";
- }
- function completeHandler(event){
- _("status").innerHTML = event.target.responseText;
- _("progressBar").value = 0;
- }
- function errorHandler(event){
- _("status").innerHTML = "Upload Failed";
- }
- function abortHandler(event){
- _("status").innerHTML = "Upload Aborted";
- }
- </script>
- </head>
- <body>
- <form id="./" method="post" enctype="multipart/form-data">
- <input type="file" name="file1" id="file1"><br>
- <input type="file" name="jpg" id="jpg">
- <input type="button" value="Upload File" onClick="uploadFile()"><br>
- <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
- <h3 id="status"></h3>
- <p id="loaded_n_total"></p>
- </form>
- </body>
- </html>