Блог

Главная - Вопросы по программированию - Обработка файла с использованием Javascript никогда не завершается

Обработка файла с использованием Javascript никогда не завершается

#javascript

#javascript

Вопрос:

У меня есть функция JS, целью которой является загрузка файла, как только пользователь выбирает его. Функция выглядит следующим образом:

 function setupFileListener() {
    document.getElementById('Attachment').addEventListener('change', (e) => {
        var file = document.getElementById('Attachment').files[0];
        if (file) {
            processFile(file);
        }
    })

    const processFile = (file) => {
        alert("Processing file");

        const fr = new FileReader();

        fr.readAsDataURL(file);
        fr.onloadend = () => fileLoaded;
    }

    const fileLoaded = (e) => {
        alert("File loaded");

        const fr = e.target
        var result = fr.result;

        console.log(result)
    }
}

Функция alert () срабатывает корректно при запуске обработки, но я никогда не получаю alert (), который срабатывает при загрузке файла. Похоже, что fileLoaded никогда не вызывается. Я запускаю это в Chrome, и никаких ошибок Javascript не генерируется.

Кто-нибудь может увидеть, что может быть не так?

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

1. Что, если вы установите обработчик событий ( onloadend ) перед чтением файла ( readAsDataURL() )?

2. Загруженный файл (e) вместо загруженный файл

3. Может быть, добавить () в fileLoaded ? . JSfiddle

Ответ №1:

Вы должны вызвать функцию вместо того, чтобы просто возвращать ее внутри события onLoadEnd

    const processFile = (file) => {
        alert("Processing file");

        const fr = new FileReader();

        fr.readAsDataURL(file);
        fr.onloadend = (e) => fileLoaded(e);
    }

Ответ №2:

Это может быть эта строка =>

 fr.onloadend = () => fileLoaded; to
fr.onloadend = () => fileLoaded();
  

 function setupFileListener() {
   document.getElementById('Attachment').addEventListener('change', (e) => {
        var file = document.getElementById('Attachment').files[0];
        if (file) {
            processFile(file);
        }
    })

    const processFile = (file) => {
        alert("Processing file");

        const fr = new FileReader();

       fr.readAsDataURL(file);
       fr.onloadend = (e) => fileLoaded(e);
       
    }

    const fileLoaded = (e) => {
        alert("File loaded");

        const fr = e.target
        var result = fr.result;

        console.log(result)
    }
}

setupFileListener()  
 <input type="file" id="Attachment">