krot

file upload ajax

Apr 18th, 2019
248
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  $(document).on('change', '.file_upload', function(event ) {
  2.                 event.stopPropagation(); // остановка всех текущих JS событий
  3.                 event.preventDefault();  // остановка дефолтного события для текущего элемента - клик для <a> тега
  4.                 let files=this.files;
  5.                
  6.                 let block=$(this).parent();
  7.                 if( typeof files == 'undefined' ) return;
  8.                 // создадим объект данных формы
  9.                 let data = new FormData();
  10.                
  11.                 // добавим переменную для идентификации запроса
  12.                 data.append( 'file_upload', 1 );
  13.                
  14.                 // заполняем объект данных файлами в подходящем для отправки формате
  15.                 $.each( files, function( key, value ){
  16.                     data.append( 'file[]', value );
  17.                 });
  18.  
  19.          
  20.                 $(block).find('.aj_progress').show();
  21.                 $(block).find('.aj_img').html('');
  22.                 // AJAX запрос
  23.                 $.ajax({
  24.                     url         : '/app?name=events&action=upload&ajax=1',
  25.                     type        : 'POST', // важно!
  26.                     data        : data,
  27.                     cache       : false,
  28.                     dataType    : 'json',
  29.                     // отключаем обработку передаваемых данных, пусть передаются как есть
  30.                     processData : false,
  31.                     // отключаем установку заголовка типа запроса. Так jQuery скажет серверу что это строковой запрос
  32.                     contentType : false,
  33.                     // функция успешного ответа сервера
  34.                     success     : function( respond, status, jqXHR ){
  35.                         // ОК - файлы загружены
  36.                          if( respond.result  ){
  37.                              $.each( respond.file, function( key, value ){
  38.                                  let height=value.height;
  39.                                  let width=value.width;
  40.                                  let ratio = width / height;
  41.                                  if( ratio > 1) {width = 200;height = 200/ratio;}
  42.                                 else {width = 200*ratio;height = 200;}
  43.                                
  44.                                
  45.                              
  46.                                 $(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+'" />');
  47.                                  
  48.                              });
  49.                            
  50.                            
  51.                          }else {
  52.                             console.log('ОШИБКА ff: ' + respond.errors );
  53.                              $(block).find('.aj_progress').hide();
  54.                              $(block).find('.aj_img').html('');
  55.                         }
  56.                     $(block).find('.aj_progress').hide();                      
  57.                     },
  58.                     // функция ошибки ответа сервера
  59.                     error: function( jqXHR, status, errorThrown ){
  60.                         console.log( 'ОШИБКА AJAX запроса: ' + status, jqXHR );
  61.                                 $(block).find('.aj_progress').hide();
  62.                                 $(block).find('.aj_img').html('');
  63.                     }
  64.  
  65.                 });
  66.  
  67.          
  68.         });
  69.   <div>
  70.             <div class="aj_img"></div>
  71.             <div class="aj_progress" style="display:none">Загрузка...</div>
  72.             <input type="file" id="f_image" name="f_image" class="file_upload"   class="widget_cf_input"  spellcheck="false" multiple/>
  73.         </div>
RAW Paste Data