Laravel上传进度栏无法正常工作

如何解决Laravel上传进度栏无法正常工作

我使用Maatwebsite在Laravel-5.8中有Excel Upload

控制器

public function import(Request $request){
    $request->validate([
        'file' => 'required|max:10000|mimes:xlsx,xls',]);

  $path1 = $request->file('file')->store('temp'); 
 $path=storage_path('app').'/'.$path1;  

    try{

        Excel::import(new LeavesImport,$path);           
        
    } catch (\Maatwebsite\Excel\Validators\ValidationException $e) {
        $failures = $e->failures();
        Log::error($e);
        $errormessage = "";
        
     foreach ($failures as $failure) {
         $errormess = "";
         foreach($failure->errors() as $error)
         {
             $errormess = $errormess.$error;
         }
         $errormessage = $errormessage.",\n At Row ".$failure->row().",".$errormess."<br>";
     }
         Session::flash('error',$errormessage);
         return back();            
    }catch (\Illuminate\Database\QueryException $e)
    {
        $errorCode = $e->errorInfo[1];
        if($errorCode == 1062){
        Log::error($e);
        DB::rollback();
        Session::flash('error','You have a duplicate entry problem!');
        }
        return back();

    }        
    Session::flash('success','Records Imported Successfully');
    return redirect()->route('imports.index');       
}

在我使用jquery-form.js添加Laravel文件上传进度栏之前，一切都运行良好。如果有重复或其他错误，则表明存在该错误，并且不会上传。如果没有问题，则说明上传成功，并指示上传成功。

在这里我添加了上传进度栏

import.blade

                            <form action="{{route('employee.import')}}" method="POST" enctype="multipart/form-data">  
                                @csrf
                             <div class="modal-body">   
                                <div class="custom-file">
                                    <input type="file" name="file" class="custom-file-input" id="customFile" required="required">
                                    <label class="custom-file-label" for="exampleInputFile">Choose Excel File: .xlsx,.xls</label>
                                </div><br/><br/>
                                <div class="progress">
                                    <div class="bar"></div >
                                    <div class="percent">0%</div >
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary">Upload</button>
                            </div>
                        </form>

JavaScript：

<script type="text/javascript">
    $(function() {
         $(document).ready(function()
         {
            var bar = $('.bar');
            var percent = $('.percent');

      $('form').ajaxForm({
        beforeSend: function() {
            var percentVal = '0%';
            bar.width(percentVal)
            percent.html(percentVal);
        },uploadProgress: function(event,position,total,percentComplete) {
            var percentVal = percentComplete + '%';
            bar.width(percentVal)
            percent.html(percentVal);
        },complete: function(xhr) {
            alert('File Uploaded Successfully');
            window.location.href = "{{ route('imports.index') }}";               
        }
      });
   }); 
 });
</script> 

现在的问题是，即使出现故障，进度条也会显示100％并显示成功。故障警报和重复警报不再显示。