Блог

У меня есть форма отправки файла и индикатор выполнения, отслеживающий, как далеко продвинулась загрузка. Однако javascript, управляющий индикатором выполнения, мешает моему контроллеру, и я не уверен, как это исправить. Мой контроллер никогда не перенаправляет обратно домой по ссылке (она работает без реализованного индикатора выполнения). Удаление window.location.href="/"; не устраняет эту проблему.

Есть идеи, как это исправить?

home.blade.php

 <form action="{{route('file.store')}}" method="post" class="w-100" enctype="multipart/form-data">
    @csrf
    <div class="progress" id="progressBar">
        <div class="bar"></div >
        <div class="percent">0%</div >
    </div>
    <br>
    <div class="custom-file overflow-hidden rounded-pill mb-3">
        <input id=“file type="file" class="custom-file-input rounded-pill" name="file">
        <label id="fileName" for=“file” class="custom-file-label rounded-pill">Choose file</label>
    </div>
    <input type="submit" class="file-upload btn btn-primary btn-block rounded-pill shadow mb-3" id="uploadButton">
</form>
 

FileController.php

 public function store(Request $request)
{

    // Process the file
    $link = “https://example.com”;
    session()->flash("link",$link);
    // return back to home with link to download the file
    return redirect()->back();
}
 

Язык JavaScript

 $(document).ready(function() {
            document.getElementById("progressBar").style.display = "none";
            var bar = $('.bar');
            var percent = $('.percent');
            $('form').ajaxForm({
                beforeSend: function() {
                    var percentVal = '0%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                    document.getElementById("progressBar").style.display = "";
                    document.getElementById('uploadButton').disabled = true;
                },
                uploadProgress: function(event, position, total, percentComplete) {
                    var percentVal = percentComplete   '%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                complete: function(xhr) {
                    document.getElementById("progressBar").style.display = "none";
                    document.getElementById('uploadButton').disabled = false;
                    window.location.href="/";
                }
            });
        });
 

Используйте это

 public function uploadMultipleFile(Request $request)
    {
 
         foreach($request->file('file') as $image)
         {
              $new_name = rand() . '.' . $image->getClientOriginalExtension();
              $image->move(public_path('images'), $new_name);
              Gallery::insert(['title' => $new_name]);
         }
 
         $res = array(
          'success'  => 'Multiple Image File Has Been uploaded Successfully'
         );
 
        return response()->json($res);
    }

<script>
$(document).ready(function(){
$('form').ajaxForm({
beforeSend:function(){
$('#success').empty();
$('.progress-bar').text('0%');
$('.progress-bar').css('width', '0%');
},
uploadProgress:function(event, position, total, percentComplete){
$('.progress-bar').text(percentComplete   '0%');
$('.progress-bar').css('width', percentComplete   '0%');
},
success:function(data)
{
if(data.success)
{
$('#success').html('<div class="text-success text-center"><b>' data.success '</b></div><br /><br />');
$('#success').append(data.image);
$('.progress-bar').text('Uploaded');
$('.progress-bar').css('width', '100%');
}
}
});
});
</script>