Как загрузить изображение через ajax?

Question

[rusgayfer]

Нужно загрузить через js изображения. Как это сделать для моего кода?

<input type="file" class="fon" name="file" accept="image/*">
<button type="button" id="edit" class="btn btn-block btn-success btn-lg send ajax" name="reload">Обновить настройки</button>

Тут только загружаю описание

$(".send").on('click', function() {

		var description = $(".desc").val();
		var reload = $(".send").val();
		
		var data = {
		'desc': $(".desc").val(),
		'reload': $(".send").val(),
		};
		
		$.ajax({
			data: data, 
			type:'POST', 
			dataType: 'json',
			success:function(data){
				
			if( data.code == "ok" ) {
					$('#okey').html(data.message);
			}
			if( data.code == "error" ) {
					$('#okey').html(data.message);
			}
				
			}
			
		});			

	});

Comments

[Максим]

загрузить куда ?

[rusgayfer]

Максим Ленский, url не указал так как для текущей страницу на сайте

[Denis]

ну куда понятно это понятно на сервер скорее всего $.ajax парметр url забыли, а вот откуда берется изображение не понятно

[rusgayfer]

sidni, исправил, забыл в html добавить

Answer 1

[Denis]

обворачивайте все необходимое в форму и отправляйте ее по аяксу, а данные сереализуйте командой:
var formData = new FormData(this);
https://stackoverflow.com/questions/19447435/ajax-...

Comments

[rusgayfer]

Сделал вот так

$(function(){
  $('#my_form').on('submit', function(e){
    e.preventDefault();
    var $that = $(this),
    formData = new FormData($that.get(0)); // создаем новый экземпляр объекта и передаем ему нашу форму (*)
      $.ajax({
      url: $that.attr('action'),
      type: $that.attr('method'),
      contentType: false, // важно - убираем форматирование данных по умолчанию
      processData: false, // важно - убираем преобразование строк по умолчанию
      data: formData,
      dataType: 'json',
      success: function(data){  
		if( data.code == "ok" ) {
		$('#okey').html(data.message);
		 }
				
		if(json){
          $that.replaceWith(json);
        }
		
      }
    });
  });
});

Но теперт не могу отследить нажатие reload

if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['reload']) ) {

А вот так работает
if ($_SERVER['REQUEST_METHOD'] == 'POST' ) {

[Denis]

Должно просто на
if(isset($_POST['reload']))
работать

[rusgayfer]

sidni, Так не работает

[rusgayfer]

Пример формы

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<form method="post" id="my_form" enctype="multipart/form-data">
  <label for="fio">Ф.И.О:</label>
    <input type="text" name="fio" id="fio"><br>
  <label for="avatar">Аватар:</label>
    <input type="file" name="avatar" id="avatar"><br>
  <input type="submit" id="submit" name="reload" value="Отправить">
</form>