У меня есть Uploader с индикатором выполнения:
index.php:
<h1>Uploader</h1> <hr> <form action="#"> <input type="file" name="image"> <button class="btn btn-sm btn-info upload" type="submit">Upload</button> <button type="button" class="btn btn-sm btn-danger cancel">Cancel</button> <div class="progress progress-striped active"> <div class="progress-bar" style="width:0%"></div> </div> </form> <script> $(document).on('submit', 'form', function(e) { e.preventDefault(); $form = $(this); uploadImage($form); }); function uploadImage($form) { $form.find('.progress-bar').removeClass('progress-bar-success') .removeClass('progress-bar-danger'); var formdata = new FormData($form[0]); //formelement var request = new XMLHttpRequest(); //progress event... request.upload.addEventListener('progress', function(e) { var percent = Math.round(e.loaded / e.total * 100); $form.find('.progress-bar').width(percent + '%').html(percent + '%'); }); //progress completed load event request.addEventListener('load', function(e) { $form.find('.progress-bar').addClass('progress-bar-success').html('upload completed....'); var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (request.readyState == 4 && request.status == 200) { document.getElementById("result").innerHTML = request.responseText; } }; request.open("post", "upload.php"); request.send(formdata); }); request.open('post', 'upload.php'); request.send(formdata); $form.on('click', '.cancel', function() { request.abort(); $form.find('.progress-bar') .addClass('progress-bar-danger') .removeClass('progress-bar-success') .html('upload aborted...'); }); } </script> upload.php :
<?php $tmp_file = $_FILES['image']['tmp_name']; $filename = $_FILES['image']['name']; move_uploaded_file($tmp_file, 'files/'. $filename); echo "result"; ?>
Моя проблема в том, что время загрузки индикатора выполнения занимает, например, 10 секунд. Затем я получаю сообщение «Загрузка завершена», а затем снова требуется 10 секунд, пока не будет загружена новая страница.
Существует два идентичных объявления var …
Попробуйте переименовать второй запрос, который находится в загрузчике загрузки.
var request = new XMLHttpRequest();
РЕДАКТИРОВАТЬ:
После пары попыток … Оказалось, что второй запрос полностью не полезен.
В результате сценарий загрузки:
function uploadImage($form){ $form.find('.progress-bar').removeClass('progress-bar-success') .removeClass('progress-bar-danger'); var formdata = new FormData($form[0]); //formelement $('#image').attr({ value: '' }); // <-- Removes the file from the input. var formdataWithoutFile = new FormData($form[0]); var request = new XMLHttpRequest(); //progress event... request.upload.addEventListener('progress',function(e){ var percent = Math.round(e.loaded/e.total * 100); $form.find('.progress-bar').width(percent+'%').html(percent+'%'); }); //progress completed load event request.addEventListener('load',function(e){ $form.find('.progress-bar').addClass('progress-bar-success').html('upload completed....'); request.onreadystatechange = function() { if (request.readyState == 4 && request.status == 200) { document.getElementById("result").innerHTML = request.responseText; } } }); request.open('post', 'upload.php'); request.send(formdata); $form.on('click','.cancel',function(){ request.abort(); $form.find('.progress-bar') .addClass('progress-bar-danger') .removeClass('progress-bar-success') .html('upload aborted...'); }); }вfunction uploadImage($form){ $form.find('.progress-bar').removeClass('progress-bar-success') .removeClass('progress-bar-danger'); var formdata = new FormData($form[0]); //formelement $('#image').attr({ value: '' }); // <-- Removes the file from the input. var formdataWithoutFile = new FormData($form[0]); var request = new XMLHttpRequest(); //progress event... request.upload.addEventListener('progress',function(e){ var percent = Math.round(e.loaded/e.total * 100); $form.find('.progress-bar').width(percent+'%').html(percent+'%'); }); //progress completed load event request.addEventListener('load',function(e){ $form.find('.progress-bar').addClass('progress-bar-success').html('upload completed....'); request.onreadystatechange = function() { if (request.readyState == 4 && request.status == 200) { document.getElementById("result").innerHTML = request.responseText; } } }); request.open('post', 'upload.php'); request.send(formdata); $form.on('click','.cancel',function(){ request.abort(); $form.find('.progress-bar') .addClass('progress-bar-danger') .removeClass('progress-bar-success') .html('upload aborted...'); }); }