laravel5.1和dropzonejs上傳圖片問題，點選開始上傳沒反應

用laravel5.1和dropzonejs上傳圖片，參考了這個範例：http://www.dropzonejs.com/bootstrap.html，範例中點擊開始上傳，會發送http請求。我複製了這個範例的程式碼，點擊開始上傳的時候，沒有任何反應，按F12查看，沒有發送http請求。
截圖如下：
1、這是上面範例的截圖，請求雖然不會發送成功，但它會發送

##2、這是我的，不會發送請求

程式碼如下：

檢視：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">

    <style>
        html, body {
            height: 100%;
        }

        #actions {
            margin: 2em 0;
        }

        /* Mimic table appearance */
        p.table {
            display: table;
        }

        p.table .file-row {
            display: table-row;
        }

        p.table .file-row > p {
            display: table-cell;
            vertical-align: top;
            border-top: 1px solid #ddd;
            padding: 8px;
        }

        p.table .file-row:nth-child(odd) {
            background: #f9f9f9;
        }

        /* The total progress gets shown by event listeners */
        #total-progress {
            opacity: 0;
            transition: opacity 0.3s linear;
        }

        /* Hide the progress bar when finished */
        #previews .file-row.dz-success .progress {
            opacity: 0;
            transition: opacity 0.3s linear;
        }

        /* Hide the delete button initially */
        #previews .file-row .delete {
            display: none;
        }

        /* Hide the start and cancel buttons and show the delete button */
        #previews .file-row.dz-success .start,
        #previews .file-row.dz-success .cancel {
            display: none;
        }

        #previews .file-row.dz-success .delete {
                display: block;
            }
        </style>
    </head>
    <body>

<p class="container" id="container">
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        upload photos
    </button>
    <!-- Modal -->
    <p class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <p class="modal-dialog dropzone" id="my-awesome-dropzone" role="document">
            <p class="modal-content">
                <p class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        <span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">upload photos</h4>
                </p>
                <p class="modal-body">
                    <p id="actions" class="row">
                        <p class="col-lg-7">
                            <span class="btn btn-success fileinput-button dz-clickable">
                                 <i class="glyphicon glyphicon-plus"></i>
                                 <span>add photos</span>
                             </span>
                        </p>
                    </p>
                    <p class="table table-striped files" id="previews">
                        <p id="template" class="file-row">
                            <!-- This is used as the file preview template -->
                            <p><span class="preview"><img data-dz-thumbnail/></span></p>
                            <p>
                                <p class="name" data-dz-name></p>
                                <strong class="error text-danger" data-dz-errormessage></strong>
                            </p>
                            <p>
                                <p class="size" data-dz-size></p>

                                <p class="progress progress-striped active" role="progressbar"
                                     aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                                    <p class="progress-bar progress-bar-success" style="width:0%;"
                                         data-dz-uploadprogress></p>
                                </p>
                            </p>
                            <p>
                                <button class="btn btn-primary start">
                                    <i class="glyphicon glyphicon-upload"></i>
                                    <span>Start</span>
                                </button>
                                <button data-dz-remove class="btn btn-warning cancel">
                                    <i class="glyphicon glyphicon-ban-circle"></i>
                                    <span>Cancel</span>
                                </button>
                                <button data-dz-remove class="btn btn-danger delete">
                                    <i class="glyphicon glyphicon-trash"></i>
                                    <span>Delete</span>
                                </button>
                            </p>
                        </p>
                    </p>
                </p>
                <p class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </p>
            </p>
        </p>
    </p>
    <script src="http://ajax.useso.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
    <script src="https://cdn.bootcss.com/dropzone/4.2.0/min/dropzone.min.js"></script>
</body>
</html>

js程式碼：

<script>
    Dropzone.autoDiscover = false;
</script>
<script>
    // Get the template HTML and remove it from the doument
    var previewNode = document.querySelector("#template");
    previewNode.id = "";
    var previewTemplate = previewNode.parentNode.innerHTML;
    previewNode.parentNode.removeChild(previewNode);

    var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
        url: "fileupload", // Set the url
        thumbnailWidth: 80,
        thumbnailHeight: 80,
        parallelUploads: 20,
        previewTemplate: previewTemplate,
        autoQueue: false, // Make sure the files aren't queued until manually added
        previewsContainer: "#previews", // Define the container to display the previews
        clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
    });

    myDropzone.on("addedfile", function (file) {
        // Hookup the start button
        file.previewElement.querySelector(".start").onclick = function () {
            myDropzone.enqueueFile(file);
        };
    });

    // Update the total progress bar
    myDropzone.on("totaluploadprogress", function (progress) {
        document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
    });

    myDropzone.on("sending", function (file) {
        // Show the total progress bar when upload starts
        document.querySelector("#total-progress").style.opacity = "1";
        // And disable the start button
        file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
    });

    // Hide the total progress bar when nothing's uploading anymore
    myDropzone.on("queuecomplete", function (progress) {
        document.querySelector("#total-progress").style.opacity = "0";
    });

    // Setup the buttons for all transfers
    // The "add files" button doesn't need to be setup because the config
    // `clickable` has already been specified.
    document.querySelector("#actions .start").onclick = function () {
        myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
    };
    document.querySelector("#actions .cancel").onclick = function () {
        myDropzone.removeAllFiles(true);
    };
</script>

路由：

Route::resource('fileupload', 'FileController');

控制器：

public function imageUpload(Requests\StorePhotoPostRequest $request)
{
    $this->wrongTokenAjax();
    $file = \Input::file('file');
    $destinationPath = 'uploads/';
    $extension = $file->getClientOriginalExtension();
    $fileName = \Auth::user()->id . '_' . time() . '.' . $extension;
    $upload_success = \Input::file('file')->move($destinationPath, $fileName);
    if ($upload_success) {
        return \Response::json('success', 200);
    } else {
        return \Response::json('error', 400);
    }
}


public function wrongTokenAjax()
{
    if (\Session::token() !== \Request::get('_token')) {
        $response = [
            'status' => false,
            'errors' => 'Wrong Token',
        ];
        return \Response::json($response);
    }
}

StorePhotoPostRequest

public function rules()
{
    return [
       'file' => 'required|image(jpeg,jpg,png,bmp,gif)',
    ];
}

世界只因有你2781 天前1094

laravel5.1和dropzonejs上傳圖片問題，點選開始上傳沒反應

全部回覆(1)我來回復