Nano Hash - криптовалюты, майнинг, программирование

Чтение и копирование данных файла с помощью FileReader

Я пытаюсь читать файлы с клиента через FileReader. Я хочу создать копию в браузере, но не могу понять, как это сделать правильно. В этом JSFiddle я повторил свою проблему, за исключением того, что я использую пользовательский класс File вместо Object, но это тот же результат.

Если я выбираю только один файл, все прекрасно, но как только я выбираю несколько файлов, появляются ошибки. Во-первых, все свойства нового объекта, который я создаю на line 9, за исключением того, что data всегда является последним выбранным файлом. Функция storeResult получает результат из fileReader OK, но не из моего нового объектного файла?

Когда я нажимаю «Проверить массив», все объекты в свойстве массивов data теперь являются последним выбранным файлом. Я предполагаю, что это как-то связано с областью действия некоторых моих переменных, но я не могу понять, где и почему.

javascript filereader
03.03.2014

  • возможный дубликат привязки переменных JavaScript и цикла 03.03.2014
  • Вы не фиксируете текущее значение file для каждого оборота цикла, поэтому каждая функция завершает сохранение только последнего значения. Вот фиксированная скрипта (единственное, что я изменил, это добавить явную ссылку на текущий файл как аргумент для вашего IIFE (function(file) { /* your code */ }(file)); 03.03.2014
  • Спасибо, это работает! Я никогда раньше не слышал о IIFE. Является ли это поведение специфичным для Javascript? Как я могу узнать, когда мне следует использовать этот подход? Кроме того, сделайте свой комментарий ответом, и я приму его. @SeanVieira 03.03.2014

Ответы:


1

У вас есть ошибка мутирующей ссылки:

var files = evt.target.files, i, f; 
for (i = 0; f = files[i]; i++) {
    var reader = new FileReader()
    reader.onload = function onLoad(event) {
        // f is available here
        // but it is not a fixed reference.
        // It changes each time the body
        // of the loop is executed.
        // This function (regardless of the current value of `i`)
        // will only be executed after the containing `for` loop
        // has run to completion.
    };

    // Schedule some work for later
    reader.readAsDataURL(f);
}

Самое простое исправление — сохранить ссылку на текущий f в замыкании:

reader.onload = (function createHandler(currentFile) {
  return function onLoad(event) {
    // f is available here
    // but it is not a fixed reference.

    // `currentFile` is pointing at the value for `f`
    // as it is for this iteration of the loop
    // (that is, it is a fixed reference).
  };

// In order to preserve the state of `f`
// we create a new reference to the value that `f` points
// to for this new function closure and bind it to `currentFile`
// by passing in `f` to our createHandler Immediately Invoked Function Expression
}(f));

И тогда станет еще понятнее, что мы делаем, если рефакторим фабричную функцию:

// As a "top-level" function
function createHandler(currentFile) {
  return function onLoad(event) {
    // f is *not* available here.
    // `currentFile` is a reference to the value of
    // whatever is passed in to our `createHandler` function.
    // (that is, it is a fixed reference).
  };
}

// Then, in our handler:
reader.onload = createHandler(f);
03.03.2014
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..