Как сохранить картинки на сервер?

Question

[d d]

Вопрос : Как сохранить файлы на сервер?

<div class="order__upload">
                  <div class="upload upload-JS">
                    <label class="upload-btn-JS">
                      <div class="upload__box upload__add-photo">
                        <input type="file" multiple name="images[]">
                        <div class="upload__plus"><span></span><span></span></div>
                        <div class="upload__text">Добавить фото</div>
                      </div>
                    </label>
                  </div>
                </div>

/ LOAD IMAGE
var fileCollection = [];
var formData = new FormData(fileCollection);
var files = [];
console.log(files);

$('.upload__add-photo').on('change', function(e){
	
  files=e.target.files;
  files2=e.target.files;
  console.log("--------after");
  console.log(files);
  $.each(files2, function(i, file){

    fileCollection.push(file);
	console.log("fileCollection");
	console.log(fileCollection);

    var reader = new FileReader();
    reader.readAsDataURL(file);
	
	console.log("files");
	console.log(files);
    reader.onload = function(e){

      var template = '<div class="upload__box upload__your-photo">'+
                        '<img src="'+e.target.result+'">'+
                        '<div class="delete-photo" onclick="delPrewievPhoto($(this).parent().index(), $(this).parent())">Удалить</div>'+
                     '</div>';

      var valueBoxPhoto = $('.upload__your-photo').length;
	  console.log("files onload");
	  console.log(files);
	  console.log("fileCollection onload")
	  console.log(fileCollection);
      if(valueBoxPhoto > 1){
        $('.upload-btn-JS').hide();
      }

      if(valueBoxPhoto == 0){
        $('.upload-JS').prepend(template);
      } else {
        $('.upload__your-photo').eq(-1).after(template);
      }
    }
  })
  files=fileCollection;
  console.log("----------------");
  console.log(files);
  console.log("----------------");
})
console.log("end");
console.log(files);
function delPrewievPhoto(indexArray, currentItem){

  fileCollection.splice(indexArray, 1);
  currentItem.remove();
  console.log(fileCollection);
  if($('.upload__your-photo').length < 4){
    $('.upload-btn-JS').show();
  }
}

Answer 1

[Кирюшка Цисарь]

где php?

Comments

[d d]

for ($i = 0; $i<$inputNum; $i++)
								{
									$value = intval($propertyID) > 0 ? $arResult["ELEMENT_PROPERTIES"][$propertyID][$i]["VALUE"] : $arResult["ELEMENT"][$propertyID];
									?>
						<input type="hidden" name="PROPERTY[<?=$propertyID?>][<?=$arResult["ELEMENT_PROPERTIES"][$propertyID][$i]["VALUE_ID"] ? $arResult["ELEMENT_PROPERTIES"][$propertyID][$i]["VALUE_ID"] : $i?>]" value="<?=$value?>" />
						<input type="file" size="<?=$arResult["PROPERTY_LIST_FULL"][$propertyID]["COL_COUNT"]?>"  name="PROPERTY_FILE_<?=$propertyID?>_<?=$arResult["ELEMENT_PROPERTIES"][$propertyID][$i]["VALUE_ID"] ? $arResult["ELEMENT_PROPERTIES"][$propertyID][$i]["VALUE_ID"] : $i?>" /><br />
									<?

									if (!empty($value) && is_array($arResult["ELEMENT_FILES"][$value]))
									{
										?>
					<input type="checkbox" name="DELETE_FILE[<?=$propertyID?>][<?=$arResult["ELEMENT_PROPERTIES"][$propertyID][$i]["VALUE_ID"] ? $arResult["ELEMENT_PROPERTIES"][$propertyID][$i]["VALUE_ID"] : $i?>]" id="file_delete_<?=$propertyID?>_<?=$i?>" value="Y" /><label for="file_delete_<?=$propertyID?>_<?=$i?>"><?=GetMessage("IBLOCK_FORM_FILE_DELETE")?></label><br />
										<?

										if ($arResult["ELEMENT_FILES"][$value]["IS_IMAGE"])
										{
											?>
					<img src="<?=$arResult["ELEMENT_FILES"][$value]["SRC"]?>" height="<?=$arResult["ELEMENT_FILES"][$value]["HEIGHT"]?>" width="<?=$arResult["ELEMENT_FILES"][$value]["WIDTH"]?>" border="0" /><br />
											<?
										}
										else
										{
											?>
					<?=GetMessage("IBLOCK_FORM_FILE_NAME")?>: <?=$arResult["ELEMENT_FILES"][$value]["ORIGINAL_NAME"]?><br />
					<?=GetMessage("IBLOCK_FORM_FILE_SIZE")?>: <?=$arResult["ELEMENT_FILES"][$value]["FILE_SIZE"]?> b<br />
					[<a href="<?=$arResult["ELEMENT_FILES"][$value]["SRC"]?>"><?=GetMessage("IBLOCK_FORM_FILE_DOWNLOAD")?></a>]<br />
											<?
										}
									}
								}

[Кирюшка Цисарь]

d d, это что?)
в общем, я понял)
Вам надо во-первых понять что js это frontend, во-вторых php - это бэкенд -> js не умеет сохранять файлы ни на какой сервер, этим занимается php, вам нужен обработчик php, которому передаст например ajax нужные файлы, а дальше сохранит вам ваши картинки

[Ярослав Иванов]

d d, Что вообще происходит?))

[d d]

Кирюшка Цисарь, а я думала , что массив $_FILES зависит от
files=e.target.files; (туда, судя по логам попадает последний файл,и в переменную $_FILES попадает именно этот файл, а не массив fileCollection. )
То есть мне средствами ajax :
$_FILES[]=array(.....);
так?

[Кирюшка Цисарь]

d d, извините, я вообще не понимаю о чём вы)

Окей, пример:

Файл html:

<div class="image-preview">
            <img id="preview" src="" alt="">
          </div>
          <form id="upload-image" enctype="multipart/form-data">
            <div class="form-group">
              <label for="image">Image file:</label>
              <input type="file" name="image" id="image">
            </div>
            <input type="submit" class="btn btn-default">
          </form>
          <div id="result">
          </div>

Файл js:

$(document).ready(function () {
 
  function readImage ( input ) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();
 
      reader.onload = function (e) {
        $('#preview').attr('src', e.target.result);
      }
 
      reader.readAsDataURL(input.files[0]);
    }
  }
 
  function printMessage(destination, msg) {
 
    $(destination).removeClass();
 
    if (msg == 'success') {
      $(destination).addClass('alert alert-success').text('Файл успешно загружен.');
    }
 
    if (msg == 'error') {
      $(destination).addClass('alert alert-danger').text('Произошла ошибка при загрузке файла.');
    }
 
  }
 
  $('#image').change(function(){
    readImage(this);
  });
 
  $('#upload-image').on('submit',(function(e) {
    e.preventDefault();
 
    var formData = new FormData(this);
 
    $.ajax({
      type:'POST', // Тип запроса
      url: 'handler.php', // Скрипт обработчика
      data: formData, // Данные которые мы передаем
      cache:false, // В запросах POST отключено по умолчанию, но перестрахуемся
      contentType: false, // Тип кодирования данных мы задали в форме, это отключим
      processData: false, // Отключаем, так как передаем файл
      success:function(data){
        printMessage('#result', data);
      },
      error:function(data){
        console.log(data);
      }
    });
  }));
});

Файл php:

if(isset($_FILES) && isset($_FILES['image'])) {
 
  //Переданный массив сохраняем в переменной
  $image = $_FILES['image'];
 
  // Проверяем размер файла и если он превышает заданный размер
  // завершаем выполнение скрипта и выводим ошибку
  if ($image['size'] > 200000) {
    die('error');
  }
 
  // Достаем формат изображения
  $imageFormat = explode('.', $image['name']);
  $imageFormat = $imageFormat[1];
 
  // Генерируем новое имя для изображения. Можно сохранить и со старым
  // но это не рекомендуется делать
  $imageFullName = './images/' . hash('crc32',time()) . '.' . $imageFormat;
 
  // Сохраняем тип изображения в переменную
  $imageType = $image['type'];
 
  // Сверяем доступные форматы изображений, если изображение соответствует,
  // копируем изображение в папку images
  if ($imageType == 'image/jpeg' || $imageType == 'image/png') {
    if (move_uploaded_file($image['tmp_name'],$imageFullName)) {
      echo 'success';
    } else {
      echo 'error';
    }
  }
}

[d d]

Кирюшка Цисарь, огромное спасибо за ответ, просто у меня не передается на сервер.
У меня фишка работает следующим образом: Я нажимаю на див "Загрузить файл", появляется другая кнопка загрузить файл (нажимаю на нее, чтобы загрузить картинку, и появляется другая кнопка "Загрузить файл"). И почему-то попадает последняя загруженная картинка на сервер, а не все картинки...

Если была бы одна кнопка ,то все было понятно...
А как в данном случае быть?

[Кирюшка Цисарь]

Если вам не всё равно, то для UX/UI - это жесть 3 кнопки с одинаковым функционалом:)
если всё равно, то надо разбираться

[d d]

Кирюшка Цисарь, но мне нужно сохранить все картинки до отправки на сервер...
Предполагается, что идет один сабмит со всеми картинками...
Это понятно, что для дизайнера это кнопки с одинаковым функционалом...

Answer 2

[Максим Тимофеев]

Супер схема, дарю:
frontend часть (тут еще работает js, но не работает php):
положить картинку в post запрос, отправить post запрос на сервер

backend часть (тут уже на работает js, но работает php):
получить на сервере post запрос, достать из post запроса картинку, сохранить картинку.

Comments

[d d]

Но мне нужно сохранить все картинки до отправки на сервер...
Предполагается, что идет один сабмит со всеми картинками...

[Максим Тимофеев]

d d, куда ж Вы их сохраните не отправляя на сервер? Обратно на диск пользователя?