php - 无法继续下一条路线，因为我的 ajax 保持返回 422 状态

Question

我正在我的页面上设置一个进度条，该进度条将通过单击提交按钮触发。正如我在一些教程中所学到的，它需要 Ajax 使其运行，并在上传完成时保持返回错误 422，并阻止我去 POST 路由。我的代码有问题吗？或者是否有任何其他解决方案可以制作进度条？

我试图检查我的代码，查看我的 Ajax 设置，似乎一切都刚刚好。但是 Ajax 响应仍然是代码 422。

@php
    session_start();
    session_destroy();
@endphp

@extends('template.master')
@section('title', 'Upload Data')
@section('head')
    <meta name="csrf-token" content="{{ csrf_token() }}" />
@endsection
@section('content')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item active" aria-current="page">Upload Your File</li>
        </ol>
    </nav>

    <br />
    <form method="POST" action="/uploadpage/submit" enctype="multipart/form-data">
    @csrf
        <div class="col-8">
            <input type="file" id="file-upload" name="file-box" class="form-control-file" />
        </div>
        <br />

        <div class="col-6">
            <div class="input-group">
                <div class="input-group-prepend">
                    <div class="input-group-text">
                        <input type="checkbox" name="temporary-checkbox" aria-label="Checkbox for following text input">
                    </div>
                    &nbsp; Temporary
                </div>
            </div>
        </div>
        <br />
        <div class="col-6">
        <input type="submit" id="submit-button" class="btn btn-outline-primary" value="Submit" />
        </div>
    </form>
    <br />
    <div class="progress">
            <div id="progressBar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                    0%
            </div>
    </div>


    <br />

    <div class="alert alert-primary">
        <strong>Temporary file</strong> will be available for 5 days.
    </div>
    <div class="alert alert-danger alert-dismissible fade show" id="danger-upload" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        The maximum size of file to upload is <strong>1Gib</strong>
    </div>

    <script type="text/javascript">
        jQuery("#file-upload").change(function(){
            if(this.files[0].size > 1000000000){
                jQuery("#file-upload").val("");
            }else{
                $('#progressBar').attr('aria-valuenow', "0").css('width', "0" + '%').text("0" + '%');
            }
        });

        $(document).ready(function() {

            $('form').on('submit', function(event) {

                event.preventDefault();

                var formData = new FormData($('form#file-input')[0]);

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $.ajax({
                    xhr : function() {
                        var xhr = new XMLHttpRequest();

                        xhr.upload.addEventListener('progress', function(e) {

                            if (e.lengthComputable) {
                                var percent = Math.round((e.loaded / e.total) * 100);
                                $('#progressBar').attr('aria-valuenow', percent).css('width', percent + '%').text(percent + '%');
                            }

                        });

                        return xhr;
                    },
                    type : 'POST',
                    url : '/uploadpage/submit',
                    data : formData,
                    processData : false,
                    success : function() {
                        alert('File uploaded!');
                    },
                    error : function(lala){
                        alert('File is Stuck \nError Code: ' + lala.status + ' ' + lala.statusText);
                    }
                });

            });

        });
    </script>
@endsection

和我的路线：

Route::post('/uploadpage/submit', 'FileController@submit');

编辑：这是我的文件控制器

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\File;
use DateTime;

class FileController extends Controller
{
    private $file, $submitted_file;
    private $upload_link = "storage";

    private function generateId($temporary){
        $generated_string = ''; 
        if($temporary == true)
            $generated_string = '10';
        else $generated_string = '90';

        $generated_string = $generated_string.time();

        return $generated_string;
    }

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $this->file = $_SESSION["files"];
        $this->submitted_file = $_SESSION["filetoup"];

        $this->file->save();
        $this->move($this->upload_link, $this->file->name);


    }

    public function submit(Request $request){
        $this->file = new File();

        $this->validate($request, [
            'file-box' => 'required',
            'temporary-checkbox' => 'nullable'
        ]);

        $this->submitted_file = $request->file('file-box');

        $this->file->name = $this->submitted_file->getClientOriginalName();
        $this->file->type = $this->submitted_file->getClientOriginalExtension();
        $this->file->size = $this->submitted_file->getSize();
        $this->file->temporary = $request->input('temporary-checkbox');
        $this->file->id = $this->generateId($request->input('temporary-checkbox'));
        $_SESSION["files"] = $this->file;
        $_SESSION["filetoup"] = $this->submitted_file;

        return view('confirmpage')->with('files', $this->file);
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
    }
}

我希望我会定向到我的下一条路线/uploadpage/submit。

标签： phpjqueryajaxlaraveltwitter-bootstrap