file upload ajax

 $(document).on('change', '.file_upload', function(event ) {
                event.stopPropagation(); // остановка всех текущих JS событий
                event.preventDefault();  // остановка дефолтного события для текущего элемента - клик для <a> тега
                let files=this.files;

                let block=$(this).parent();
                if( typeof files == 'undefined' ) return;
                // создадим объект данных формы
                let data = new FormData();

                // добавим переменную для идентификации запроса
                data.append( 'file_upload', 1 );

                // заполняем объект данных файлами в подходящем для отправки формате
                $.each( files, function( key, value ){
                    data.append( 'file[]', value );
                });


                $(block).find('.aj_progress').show();
                $(block).find('.aj_img').html('');
                // AJAX запрос
                $.ajax({
                    url         : '/app?name=events&action=upload&ajax=1',
                    type        : 'POST', // важно!
                    data        : data,
                    cache       : false,
                    dataType    : 'json',
                    // отключаем обработку передаваемых данных, пусть передаются как есть
                    processData : false,
                    // отключаем установку заголовка типа запроса. Так jQuery скажет серверу что это строковой запрос
                    contentType : false,
                    // функция успешного ответа сервера
                    success     : function( respond, status, jqXHR ){
                        // ОК - файлы загружены
                         if( respond.result  ){
                             $.each( respond.file, function( key, value ){
                                 let height=value.height;
                                 let width=value.width;
                                 let ratio = width / height;
                                 if( ratio > 1) {width = 200;height = 200/ratio;}
                                else {width = 200*ratio;height = 200;}



                                $(block).find('.aj_img').append('<img src="'+value.url+'" width="'+width+'" height="'+height+'"/>'+'<input type="text" style="display:none" name="f_file_url[]" value="'+value.url+'" />');

                             });


                         }else {
                            console.log('ОШИБКА ff: ' + respond.errors );
                             $(block).find('.aj_progress').hide();
                             $(block).find('.aj_img').html('');
                        }
                    $(block).find('.aj_progress').hide();
                    },
                    // функция ошибки ответа сервера
                    error: function( jqXHR, status, errorThrown ){
                        console.log( 'ОШИБКА AJAX запроса: ' + status, jqXHR );
                                $(block).find('.aj_progress').hide();
                                $(block).find('.aj_img').html('');
                    }

                });


        });
  <div>
            <div class="aj_img"></div>
            <div class="aj_progress" style="display:none">Загрузка...</div>
            <input type="file" id="f_image" name="f_image" class="file_upload"   class="widget_cf_input"  spellcheck="false" multiple/>
        </div>