文件上传进度条干扰控制器重定向答案

【问题标题】：File upload progress bar interferes with Controller redirect文件上传进度条干扰控制器重定向
【发布时间】：2021-11-16 10:23:43
【问题描述】：

我有一个文件提交表单和一个跟踪上传进度的进度条。但是，控制进度条的 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>

文件控制器.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="/";
                }
            });
        });

【问题讨论】：

进度条使用 vue.js 更容易

标签： javascript html jquery ajax laravel

【解决方案1】：

使用这个

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>

【讨论】：