Вызов функции Laravel из JavaScript / Ajax - Dropzone. js & Laravel - PullRequest
Новая
       9

Вызов функции Laravel из JavaScript / Ajax - Dropzone. js & Laravel

0 голосов
/ 29 апреля 2020

Привет, у меня есть форма, которая использует dropzone. js, как показано ниже, 

<form method="post" action="{{url('/example/fileupload')}}" enctype="multipart/form-data" class="dropzone" id="dropzone">

        @csrf

        <input type="submit">

    </form>

Я использую приведенный ниже код для настройки dropzone. js

<script type="text/javascript">
        Dropzone.options.dropzone =
         {
            maxFilesize: 12,
            acceptedFiles: ".jpeg,.jpg,.png,.gif",
            addRemoveLinks: true,
            timeout: 5000

};
</script>

Его Работа с внешним интерфейсом означает, что он показывает загрузку изображений только в виде Dropzone. Я хочу спросить, как я могу вызвать мою функцию контроллера laravel отсюда. Эта функция имеет все логи c для переименования файлов изображений и сохранения их в базе данных. Функция (названная fileupload) должна быть вызвана после того, как я нажму кнопку отправки. Я уже создал маршруты, как показано ниже, 

//just output the view with dropzone area
    Route::get('/example','exampleController@show'); 

 //fileupload function contains all the logic of renaming and saving image iles
    Route::post('/example/fileupload','exampleController@fileupload');

1 Ответ

0 голосов
/ 29 апреля 2020

Dropzone автоматически вызовет действие вашей формы, как только файлы будут сброшены в этой зоне. Вам не нужна кнопка отправки, чтобы отправить файлы на сервер. Вы можете убедиться в этом, открыв Chrome инспектор DOM браузера и go на вкладке Сеть, затем перетащите файлы в рабочую зону, и вы увидите некоторые запросы на вкладке сети. Ваша форма может выглядеть следующим образом. 

<form method="post" action="{{url('/example/fileupload')}}" enctype="multipart/form-data" 
                  class="dropzone" id="dropzone">
    @csrf
</form>

Вы можете переименовывать файлы перед отправкой на сервер, но это не обязательно. 

<script type="text/javascript">
        Dropzone.options.dropzone =
         {
            maxFilesize: 12,
            renameFile: function(file) {
                var dt = new Date();
                var time = dt.getTime();
               return time+file.name;
            },
            acceptedFiles: ".jpeg,.jpg,.png,.gif",
            addRemoveLinks: true,
            timeout: 5000,
            success: function(file, response) 
            {
                console.log(response);
            },
            error: function(file, response)
            {
               return false;
            }
};
</script>

На стороне сервера вы можете хранить файлы, как показано ниже. 

use App\ImageUpload;

public function fileupload(Request $request)
    {
        $image = $request->file('file');
        $imageName = $image->getClientOriginalName();
        $image->move(public_path('images'),$imageName);

        $imageUpload = new ImageUpload();
        $imageUpload->filename = $imageName;
        $imageUpload->save();
        return response()->json(['success'=>$imageName]);
    }
...