Laravel ajax индикатор выполнения - PullRequest
Новая
       0

Laravel ajax индикатор выполнения

0 голосов
/ 02 марта 2020

У меня есть скрипт ниже, и я пытаюсь получить процент загрузки, но ничего не отображается, пока мой файл не загружен полностью!

Код 

$(document).ready(function() {
  $('.nationBtn').on('click', function(e) {
    e.preventDefault();
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
    var form = $(this).closest('form');
    var fd = new FormData();
    fd.append('national', $('#national')[0].files[0]);

    $.ajax({
      beforeSend: function() {
        $('.progress-bar').text('0%');
        $('.progress-bar').css('width', '0%');
      },
      UploadProgress: function(event, position, total, percentComplete) {
        $('.progress-bar').text(percentComplete + '%');
        $('.progress-bar').css('width', percentComplete + '%');
      },
      url: form.attr('action'),
      data: fd,
      type: 'POST',
      processData: false,
      contentType: false,

      success: function(data) {
        if (data.error) {
          $('.progress-bar').text('0%');
          $('.progress-bar').css('width', '0%');
        }

        if (data.success) {
          $('.progress-bar').text('Uploaded successfully.');
          $('.progress-bar').css('width', '100%');
        }
      }
    });
  });
});
<!doctype html>
<html lang="en-US">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="http://malsup.github.com/jquery.form.js"></script>
</head>

<body>
  <div class="container">
    <form action="{{route('nationalUpload')}}" method="POST" enctype="multipart/form-data">
      @csrf @method('POST')

      <input type="file" name="national" id="national" class="form-control">
      <div class="progress mt-2">
        <div class="progress-bar" role="progressbar" aria-valuenow="" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
          0%
        </div>
      </div>

      <button type="submit" class="mt-3 nationBtn btn btn-primary">Upload</button>

    </form>
  </div>
</body>

</html>

Проблема

У меня нет процента в моем индикаторе прогресса.

Есть идеи?

1 Ответ

0 голосов
/ 02 марта 2020

Существует проблема, что ваш токен csrf не передается вместе с заголовком, поэтому я внес некоторые изменения в ваш скрипт, см. Код ниже. Вам не нужно добавлять каждое поле отдельно, всю форму можно передать с новыми FormData (this) событие on ('submit') запускается. 

$(document).ready(function() {
  $('form').on('submit', function(e) {
    e.preventDefault();
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name=""csrf-token""]').attr('content')
      }
    });
    var form = $(this).closest('form');
    var fd = new FormData(this);
    /* fd.append('national', $('#national')[0].files[0]);
    fd.append('_token',$(document).find('input[name=""_token""]').val()) */

    $.ajax({
      beforeSend: function() {
        $('.progress-bar').text('0%');
        $('.progress-bar').css('width', '0%');
      },
      UploadProgress: function(event, position, total, percentComplete) {
        $('.progress-bar').text(percentComplete + '%');
        $('.progress-bar').css('width', percentComplete + '%');
      },
      url: form.attr('action'),
      data: fd,
      type: 'POST',
      processData: false,
      contentType: false,

      success: function(data) {
        if (data.error) {
          $('.progress-bar').text('0%');
          $('.progress-bar').css('width', '0%');
        }

        if (data.success) {
          $('.progress-bar').text('Uploaded successfully.');
          $('.progress-bar').css('width', '100%');
        }
      }
    });
  });
});
  </script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...