выберите и загрузите несколько фотографий на стороне клиента

#javascript #image #file #upload

#javascript #изображение #файл #загрузка

Вопрос:

я пытаюсь загрузить изображения со своего компьютера, используя этот код

 var filesValues = []

$(photosbtn).click(function() {
    photos.click()

    $(photos).change((e) => {

    const file  = e.target.files[0];

 if (file){

 filesValues.push(file)

console.log(filesValues)
}
 

}}

Теперь, если я выберу один файл, результатом будет один файл, подобный этому

0: Файл {имя:»130492893_1475704719298017_6321765405148113863_n.jpg «, Последнее изменение: 1607806703000, Последнее изменение даты: Сб 12 декабря 2020 г. 22:58:23 GMT 0200 (восточноевропейское стандартное время), webkitRelativePath: «», размер: 17124, …}длина: 1__proto__: Array(0)

но если я снова выберу одну, результатом станет [первое изображение, второе изображение, второе изображение], он повторяет последний файл таким образом

0: Файл {имя: «130492893_1475704719298017_6321765405148113863_n.jpg «, Последнее изменение: 1607806703000, Последнее изменение даты: Сб 12 декабря 2020 г. 22:58:23 GMT 0200 (восточноевропейское стандартное время), webkitRelativePath: «», размер: 17124, …}

1: File {name: «Изображение WhatsApp 2020-09-21 в 6.41.36 AM.jpeg «, Последнее изменение: 1600663313303, Последнее изменение даты: Пн Сен 21 2020 06:41:53 GMT 0200 (восточноевропейское стандартное время), webkitRelativePath: «», размер: 61490, …}

2: File {name:»Изображение WhatsApp 2020-09-21 в 6.41.36 AM.jpeg «, Последнее изменение: 1600663313303, Последнее изменение даты: Пн, 21 сентября 2020 г. 06:41:53 GMT 0200 (восточноевропейское стандартное время), webkitRelativeP

и если я выберу одну снова, последняя будет повторяться трижды и так далее.

каково решение этой проблемы, пожалуйста?

Ответ №1:

Не делайте этого:

 filesValues.push ...
 

Попробуйте этот способ:

 var files = new FormData();
files.append(firstFile);
files.append(secondFile);
 

Комментарии:

1. Та же проблема

Ответ №2:

я нашел ответ, и это так

 var filesValues = []

$(photosbtn).click(function() {
    photos.click()
})

    $(photos).change((e) => {

    const file  = e.target.files[0];

 if (file){

 filesValues.push(file)

console.log(filesValues)
})
 

мы не должны помещать функцию (.change) внутри функции (.click) .