Отправка формы содержащий файл с помощью fetch на js

Поле:
Любой один файл:
Любые картинки, много:
Любые картинки с пред.просмотром: Выберите файлы

No files selected!

Исходный код этого примера:

<form id="formElem">
    <label>Поле:
        <input type="text" name="txt" value="Введенный текст">
    </label><br>
    <label>Любой один файл:
        <input type="file" name="f1">
    </label><br>
    <label>Любые картинки, много:
        <input type="file" name="f2[]" multiple accept="image/*">
    </label><br>
    <label>Любые картинки с пред.просмотром:
    <input type="file" id="fileElem" name="f3[]" multiple accept="image/*" style="display:none" onchange="handleFiles(this)">
    <a href="#" id="fileSelect">Выберите файлы</a>
    <div id="fileList">
        <p>No files selected!</p>
    </div>
    </label>
    <label>
        <input type="submit" name="sub" value="Отправить">
    </label>
    <div id="info" style="background-color:#d0e9c6;padding:5px 10px"></div>
</form>
<script>
    let formElem=document.getElementById('formElem');
    formElem.onsubmit = async (e) => {
        e.preventDefault();

        let response = await fetch('/java/example/input_form_send_fetch.php', {
            method: 'POST',
            body: new FormData(formElem)
        });
        //let result = await response.json(); alert(result.message);
        document.getElementById('info').innerHTML=await response.text();
    };

    window.URL = window.URL || window.webkitURL;

    var fileSelect = document.getElementById("fileSelect"),
        fileElem = document.getElementById("fileElem"),
        fileList = document.getElementById("fileList");

    fileSelect.addEventListener("click", function (e) {
        fileElem.click();
        e.preventDefault(); // prevent navigation to "#"
    }, false);

    function handleFiles(files) {
        files=files.files;
        console.log(files);
        if (files.length<1) {
            fileList.innerHTML = "<p>Файлы не выбраны!</p>";
        } else {
            var list = document.createElement("ul");
            fileList.appendChild(list);
            for (var i = 0; i < files.length; i++) {
                var li = document.createElement("li");
                list.appendChild(li);

                var img = document.createElement("img");
                img.src = window.URL.createObjectURL(files[i]);
                img.style.maxHeight = '60px';
                img.onload = function() {
                    window.URL.revokeObjectURL(this.src);
                }
                li.appendChild(img);
                var info = document.createElement("span");
                info.innerHTML = " "+files[i].name + ": " + files[i].size + " bytes";
                li.appendChild(info);
            }
        }
    }
</script>

Описание функции handleFiles для вывода превьюшек загружаемых картинок:

1. Создаётся новый элемент - неупорядоченный список (<ul>).
2. Этот новый элемент вставляется в блок <div> с помощью вызова его метода element.appendChild().
3. Для каждого File в FileList, представляемого files:
   1. Создаём новый элемент пункта списка (<li>) и вставляем его в список.
   2. Создаём новый элемент изображения (<img>).
   3. Устанавливаем источник изображения в новый URL объекта, представляющий файл, используя window.URL.createObjectURL() для создания URL на двоичный объект.
   4. Устанавливаем максимальную высоту изображения в 60 пикселей.
   5. Устанавливаем обработчик события загрузки изображения для освобождения URL объекта, т.к. после загрузки изображения он больше не нужен. Это делается вызовом метода window.URL.revokeObjectURL(), передавая в него строку URL объекта, которая указана в img.src.
   6. Добавляем новый элемент в список.

Для отображения PDF используйте следующее решение:

URL объектов могут быть использованы не только для изображений! Также этот приём можно использовать и для других ресурсов, которые могут отображаться браузером, например, файлы PDF. В Firefox, для того чтобы файл PDF появился в iframe и не предлагался для загрузки, нужно установить pdfjs.disabled в значение false Non-standard.

<iframe id="viewer"></iframe>
<script>
    var obj_url = window.URL.createObjectURL(blob);
    var iframe = document.getElementById('viewer');
    iframe.setAttribute('src', obj_url);
    window.URL.revokeObjectURL(obj_url);
</script>

Для отображения видео используйте следующее решение:

<video id="video"></video>
<script>
var video = document.getElementById('video');
var obj_url = window.URL.createObjectURL(blob);
video.src = obj_url;
video.play()
window.URL.revokeObjectURL(obj_url);
</script>

.
Прокомментировать/Отблагодарить