V
V
Vladimir2019-11-21 17:51:58
JavaScript
Vladimir, 2019-11-21 17:51:58

How to upload an image to the server using js/jquery without php?

Good evening. In php I can write a simple loader in 5 minutes, but in js in Google there is no simple script or instruction, only ajax + php. Please tell me how can I implement this?

Answer the question

In order to leave comments, you need to log in

3 answer(s)
T
ThunderCat, 2019-11-21
@HistoryART

https://www.google.ru/search?q=file+upload+node+js

M
McBernar, 2019-11-21
@McBernar

Youtube > nodejs image upload
Bad search.

V
Valentin Simerenko, 2019-11-21
@volovetckoliya

// обработка и отправка AJAX запроса при клике на кнопку upload_files
$('.upload_files').on( 'click', function( event ){

  event.stopPropagation(); // остановка всех текущих JS событий
  event.preventDefault();  // остановка дефолтного события для текущего элемента - клик для <a> тега

  // ничего не делаем если files пустой
  if( typeof files == 'undefined' ) return;

  // создадим объект данных формы
  var data = new FormData();

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

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

  // AJAX запрос
  $.ajax({
    url         : './submit.php',
    type        : 'POST', // важно!
    data        : data,
    cache       : false,
    dataType    : 'json',
    // отключаем обработку передаваемых данных, пусть передаются как есть
    processData : false,
    // отключаем установку заголовка типа запроса. Так jQuery скажет серверу что это строковой запрос
    contentType : false, 
    // функция успешного ответа сервера
    success     : function( respond, status, jqXHR ){

      // ОК - файлы загружены
      if( typeof respond.error === 'undefined' ){
        // выведем пути загруженных файлов в блок '.ajax-reply'
        var files_path = respond.files;
        var html = '';
        $.each( files_path, function( key, val ){
           html += val +'<br>';
        } )

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

  });

});

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question