Как добавить путь к файлу в массив, например через input type='file'?

Question

[Сергей Зенькович]

Всем привет!! Мне нужен массив с путями фотографий, как их добавить? Можно ли это реализовать через input type='file'?

Comments

[Lynn «Кофеман»]

Зачем?
Нет.

[Сергей Зенькович]

Lynn «Кофеман», мне нужно кнопкой добавлять на страницу фотографии, выбранные из памяти компьютера.

[Strannyk]

JS в браузере не имеет доступа к файловой системе. (И слава богу.)
Но вы можете вывести фотографии, которые юзер добавил в файловый инпут multiple. Не отправляя их на сервер.

[Егор]

По идее если вы клонируете несколько file инпутов с одним и тем же именем то они будут отправляться на сервер с формой все через запятую. В .NET это можно обыграть в массив на входе контроллера если PHP то там можно вроде в имени инпута поставить квадратные скобочки и это будет типо массив .
Если вам нужно это в скрипте, то так же клонируйте инпуты но уже в коде вы должны из все обходить и добавлять их value в какой то свой массив.
Ну и у формы надо обязательно выставить enctype="multipart/form-data"
Как то так...

[Сергей Зенькович]

Strannyk, а можно поподробнее.

Answer 1

[v3shin]

Как описано на https://learn.javascript.ru/file:

<img id="testImage">
<input type="file" onchange="readFile(this)">

<script>
function readFile(input) {
    let reader = new FileReader();
    reader.readAsDataURL(input.files[0]);
    reader.onload = function() {
        document.getElementById('testImage').src = reader.result;
    };
}
</script>