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

Question

[VegasChickiChicki]

Есть вот такая форма:

<form>
   <input type="file" id="image" name="file">
   <label for="image">
      <i class="fa fa-plus" aria-hidden="true"></i>
   </label>
</form>

При клике выполняется вот эта функция:

$.ajax({
            type: "POST",
            url: "./admin.php",
            data: {
                action: "addProjectPhoto",
                index: index,
            },
        });

Я немного поискал и нашел вот такой вот код и добавил условие:

if ($_POST['action'] && $_POST['action'] === 'addProjectPhoto'){
    if(isset($_FILES['file'])) {
      // проверяем, можно ли загружать изображение
      $check = can_upload($_FILES['file']);
    
      if($check === true){
        // загружаем изображение на сервер
        make_upload($_FILES['file']);
        echo "<strong>Файл успешно загружен!</strong>";
      }
      else{
        // выводим сообщение об ошибке
        echo "<strong>$check</strong>";  
      }
    }

   function can_upload($file){
	// если имя пустое, значит файл не выбран
    if($file['name'] == '')
		return 'Вы не выбрали файл.';
	
	/* если размер файла 0, значит его не пропустили настройки 
	сервера из-за того, что он слишком большой */
	if($file['size'] == 0)
		return 'Файл слишком большой.';
	
	// разбиваем имя файла по точке и получаем массив
	$getMime = explode('.', $file['name']);
	// нас интересует последний элемент массива - расширение
	$mime = strtolower(end($getMime));
	// объявим массив допустимых расширений
	$types = array('jpg', 'png', 'gif', 'bmp', 'jpeg');
	
	// если расширение не входит в список допустимых - return
	if(!in_array($mime, $types))
		return 'Недопустимый тип файла.';
	
	return true;
  }
  
  function make_upload($file){	
	// формируем уникальное имя картинки: случайное число и name
	$name = mt_rand(0, 10000) . $file['name'];
	copy($file['tmp_name'], 'img/' . $name);
  }
}

С PHP у меня мало опыта работы ,я его плохо знаю ,не могу понять как при AJAX запросе передать изображение.
Прошу помощи.

Answer 1

[Шохрух Шаймардонов]

Тут обсуждалась ваша проблема и имеются решения

Comments

[VegasChickiChicki]

Я частично смог решить свою задачу вот так:

el.querySelector('.workspace__main-images .workspace__main-images-toolbar .workspace__main-images-toolbar-settings form input[type=file]').onchange = function () {

        let image,
            data = new FormData();

        image = this.files[0];

        data.append('image',image);

        $.ajax({
            type: "POST",
            url: "./admin.php",
            contentType: false,
            processData:false,
            data: data,
        });
    }

Сохранение на сервер:

if(isset($_FILES['image'])) {
    copy($_FILES['image']['tmp_name'], '../img/' . '13124' . '.PNG');
}

Но не могу понять ,как теперь при запросе передать какие либо данные ,в частности индекс файла.
У меня зада задавать файлам определенное имя при передаче ,в зависимости от того в каком месте на сайте пользователь кликнул на форму ,не могу понять как передать по мимо картинки еще какие либо переменные через этот же запрос.

Answer 2

[Дмитрий]

Доброе утро.
Вот тут рабочий пример.

Comments

[VegasChickiChicki]

Утро доброе ,пытаюсь вот так поймать файл ,выдает ошибку

document.querySelectorAll('.project').forEach(function (el,index) {

    el.querySelector('.workspace__main-images .workspace__main-images-toolbar .workspace__main-images-toolbar-settings form').onchange = function () {

        let data = new FormData,
            filesField = this.value.find('input[type="file"]'),
            fileName = filesField.attr('name'),

        file = filesField.prop('files')[0];

        data.append(fileName, file);

        console.log(data);
    }
});

Есть предположение ,что может быть из-за
onchange
Код выполняется до появления файла в форме ,но я не уверен ,возможно накосячил с this.

Ошибка вот :
Cannot read property 'find' of undefined at HTMLFormElement.el.querySelector.onchange

[Дмитрий]

VegasChickiChicki, без изменений код рабочий.

[VegasChickiChicki]

Дмитрий, Я частично смог решить свою задачу вот так:

el.querySelector('.workspace__main-images .workspace__main-images-toolbar .workspace__main-images-toolbar-settings form input[type=file]').onchange = function () {

        let image,
            data = new FormData();

        image = this.files[0];

        data.append('image',image);

        $.ajax({
            type: "POST",
            url: "./admin.php",
            contentType: false,
            processData:false,
            data: data,
        });
    }

Сохранение на сервер:

if(isset($_FILES['image'])) {
    copy($_FILES['image']['tmp_name'], '../img/' . '13124' . '.PNG');
}

Но не могу понять ,как теперь при запросе передать какие либо данные ,в частности индекс файла.
У меня зада задавать файлам определенное имя при передаче ,в зависимости от того в каком месте на сайте пользователь кликнул на форму ,не могу понять как передать по мимо картинки еще какие либо переменные через этот же запрос.

[Дмитрий]

VegasChickiChicki, вот тут идёт обработка дополнительных полей формы.

// Сбор данных из обычных полей
            form.find(':input[name]').not('[type="file"]').each(function() { 
                var field = $(this);
                data.append(field.attr('name'), field.val());
            });

[VegasChickiChicki]

Дмитрий, Я понимаю ,я добавлю в data ключ -> значение ,это я могу ,но как тогда мне в PHP скрипте обращаться по ключу к значению? $_FILES['key'] так?

[Дмитрий]

VegasChickiChicki, зачем? Какой может быть key в $_FILES?!!
Вы хотя бы в документацию заглянули для приличия!!!
Если найдёте в массиве $_FILES ключ с именем "key" - сообщите.
Все остальные данные надо получать из $_POST!!!

[VegasChickiChicki]

Дмитрий, Большое спасибо ,только начал изучать PHP ,сталкиваюсь с банальными проблемами ,теперь все стало гораздо яснее.

Answer 3

[Ilya Loginov]

Вот тут достаточно подробная статья, с разбором практически каждой строки кода.

Comments

[VegasChickiChicki]

Я частично смог решить свою задачу вот так:

el.querySelector('.workspace__main-images .workspace__main-images-toolbar .workspace__main-images-toolbar-settings form input[type=file]').onchange = function () {

        let image,
            data = new FormData();

        image = this.files[0];

        data.append('image',image);

        $.ajax({
            type: "POST",
            url: "./admin.php",
            contentType: false,
            processData:false,
            data: data,
        });
    }

Сохранение на сервер:

if(isset($_FILES['image'])) {
    copy($_FILES['image']['tmp_name'], '../img/' . '13124' . '.PNG');
}

Но не могу понять ,как теперь при запросе передать какие либо данные ,в частности индекс файла.
У меня зада задавать файлам определенное имя при передаче ,в зависимости от того в каком месте на сайте пользователь кликнул на форму ,не могу понять как передать по мимо картинки еще какие либо переменные через этот же запрос.