Форум

Katy93 · #1 (**permalink**) 16.04.2020, 17:04

Мне нужно сделать так, чтобы когда я добавляла картинку она отображалась в html документе, после добавление нескольких картинок, можно было одной кнопкой submit отправить их всех на сервер. Кое-какие работы я уже сделала например преобразовала base 64 в blob и полученный результат вывела в html документ. Когда поле с файлами меняется срабатывает change и там уже идёт преобразование и отображение в html документе. Как теперь все добавленные файлы в html документ одним нажатием на submit отправить на сервер? Например добавила пять картинок потом их отправила при нажатии submit.
Вот код:

<HTML>
<HEAD>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<title>Загрузка нескольких файлов</title></HEAD>
<body>

<script>
$(document).ready(function(){
    $('#form_upload').on('change', 'form input[type=file]', function()
    {
        var input = this;
        if (input.files && input.files[0]) {
            var file = input.files[0],
                reader = new FileReader();

            reader.onload = function(e){
                var fileData = e.target.result,
                    parts, type, base64Data;

                parts = fileData.split(',');
                type = parts[0];
                base64Data = parts[1];

                type = type.split(';')[0].split(':')[1];

                var blobImage = b64toBlob(base64Data, type);
                
                const blobUrl = URL.createObjectURL(blobImage);
  
                const img = document.createElement('img');
                img.src = blobUrl;
                document.body.appendChild(img);

                
            }

            reader.readAsDataURL(file);
        }

    });
    $('#form_upload').on('submit', function(event){
      event.preventDefault();
      //При щелчке на сервер должны загружаться картинки
    });
});
function b64toBlob(b64Data, contentType, sliceSize) {
  
  contentType = contentType || '';
  
  sliceSize = sliceSize || 512;

  var byteCharacters = atob(b64Data);
  var byteArrays = [];

  for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    var slice = byteCharacters.slice(offset, offset + sliceSize);

    var byteNumbers = new Array(slice.length);
    for (var i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    var byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);
  }

  var blob = new Blob(byteArrays, {type: contentType});
  
  return blob;
}
</script>

<form id="form_upload" action="" method="POST">
    
    <input type="hidden" name="MAX_FILE_SIZE" value="30000" />
    <input name="userfile" type="file"/>
    <input type="submit" value="Отправить">
</form>

</BODY>
</HTML>

laimas · #2 (**permalink**) 16.04.2020, 17:09

https://developer.mozilla.org/ru/doc...ormData/append

Nexus · #3 (**permalink**) 16.04.2020, 17:11

Зачем вы изображение читаете с помощью FileReader'а, затем конвертируете base64 в blob, если все равно скармливаете blob методу «URL.createObjectURL»?
https://developer.mozilla.org/ru/doc...reateObjectURL
Посмотрите на параметры, которые может принимать этот метод.

Вы можете полученный файл сразу скормить методу URL.createObjectURL и получить туже самую ссылку.

P.S. не забывайте освобождать память от мусора с помощью метода «URL.revokeObjectURL». Сейчас вы его не используете, а стоит.

laimas · #4 (**permalink**) 16.04.2020, 17:18

Походу base64->blob вообще лишнее тут, если только с файлами не производится преобразование на клиенте.

Katy93 · #5 (**permalink**) 16.04.2020, 17:24

Как загрузить на сервер, так никто не сказал.

Nexus · #6 (**permalink**) 16.04.2020, 17:27

Сообщение от Katy93

Как загрузить на сервер, так никто не сказал.

А вы гуглить не пробовали?
Даже на этом форуме есть уйма результатов.

$('#form_upload').on('submit', function(event) {
    event.preventDefault();
  
    $.ajax({
        url: this.action,
        type: this.method,
        data: new FormData(this),
        contentType: false,
        processData: false,
        cache: false,
        success: function(response) {
            // handle response
        }
    });
});

Katy93 · #7 (**permalink**) 16.04.2020, 17:41

Цитата:

А вы гуглить не пробовали?

Пробовала но подходящих вариантов не нашла.

Nexus · #8 (**permalink**) 16.04.2020, 17:41

<form id="form_upload" action="/path-to-handler" method="POST">
    <input type="hidden" name="MAX_FILE_SIZE" value="30000"/>
    <input name="userfiles[]" type="file" multiple/>
    <div id="previews"></div>
    
    <input type="submit" value="Отправить"/>
</form>

<style>
  img {
    max-width: 150px;
    margin-right: 5px;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const form = document.querySelector('#form_upload');
    const inputFile = form ? form.querySelector('[name="userfiles[]"]') : undefined;

    if (!form || !inputFile) {
      return void console.error('Form of input[type=file] not found');
    }

    const imagesPreviews = [];
    const previewsContainer = document.querySelector('#previews');

    inputFile.addEventListener('change', function () {
      if (!previewsContainer || !this.files) {
        return;
      }

      previewsContainer.innerHTML = '';

      let objectUrl;
      while (objectUrl = imagesPreviews.shift()) {
        URL.revokeObjectURL(objectUrl);
      }

      [].forEach.call(this.files, function (file) {
        const objectUrl = URL.createObjectURL(file);
        const image = document.createElement('img');

        image.alt = file.name;
        image.src = objectUrl;

        previewsContainer.appendChild(image);
        imagesPreviews.push(objectUrl);
      });
    });

    form.addEventListener('submit', function (e) {
      e.preventDefault();

      fetch(this.action, {
        method: this.method,
        body: new FormData(this)
      }).then(function (res) {
        return res.json();
      }).then(function (response) {
        // handle response
      });
    });
  });
</script>

Katy93 · #9 (**permalink**) 20.04.2020, 20:39

Уже несколько дней пытаюсь выполнить пример выше. Пересмотрела много информации в сети, не работает пример. Проблема с res.json()

Цитата:

Uncaught (in promise) SyntaxError: Unexpected token <

laimas · #10 (**permalink**) 20.04.2020, 21:45

Сервер возвращает не json или его, но с "грязью".

Форум

Справочник

Discord чат

Курсы javascript