Изображение по умолчанию не установлено

Question

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

Я создал this jsFiddle

У меня есть следующие вопросы:

A) Код в строке 63-77, кажется, игнорируется, хотя, когда я печатаю значение «я» в строке 25, я могу видеть (я подозреваю, что он должен иметь какое-то отношение к природе окна. Filereader, но не уверен).

if (i == 0) //if this is the first picture add it as primary too 
{ 
    var primaryimage = ' <img id=' + filename + ' height="220" width="220" src=' + this.result + ' /> '; 

    $('#primary-pic').find('.custom-input-file').hide(); 
    $('#primary-pic').find('p').hide(); 
    $('#primary-pic').append(primaryimage); 
    $('.custom-input-file').show(); 
} 

B) Если добавить более одного изображения и нажмите кнопку «Установить по умолчанию» по какой-то причине это не похоже на работу последнего изображения, но не знаю, почему.

Благодаря

Answer 1

С вашим кодом было много ошибок.

Среди них:

• Глубокой вложенность одной очень длинной функции, было трудно читать и отлаживать.
• Область изменения: вы предположили, что i как-то «заморожен» при создании обработчика. В самом деле, i чтения внутри обработчика был таким же, как и в i основной функции:

В этом примере, i прогрессирует и значение, с которыми сталкиваются функция будет 4.

for (var i = 0; i < 4; i++) { 
    var file = input.files[i]; 
    var reader = new FileReader(); 
    reader.onloadend = (function (file) { 
     return function() { 
      if (i == 0) { //actually, i will be 4 
      } 
     } 
    })(file) 
} 

• Некоторые ошибки HTML.
• Использование встроенных обработчиков событий. Я не рекомендую использовать их.
• Бизнес-логика и пользовательский интерфейс тесно связаны. Я бы предложил создать объект, который содержит метаданные и состояние изображения, и позволить ему построить пользовательский интерфейс в соответствии с его состоянием.Это более надежная архитектура.

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

Answer 2

1) Эти линии никогда не достигнет, потому что if(i == 0) тогда input.files.length == 1 возвращает истину, и поэтому, когда она идет в секцию еще (2 строки выше) i на самом деле больше, чем 0.

2) Я подумайте, что проблема заключается в том, что вы создаете несколько элементов, которые имеют один и тот же идентификатор (img и button). Идентификатор должен быть уникальным.

Answer 3

Эй, я верю, что вижу вашу проблему. Вы используете событие onloadend из объекта FileReader в цикле. Это асинхронная функция, то есть JavaScript не будет ждать выполнения этой функции до перехода на следующую итерацию цикла. Как таковая часть вашей логики зависит от функции onloadend, которая уже была выполнена для рассматриваемого изображения, однако в вашей текущей настройке это ненадежно, i var может указывать на следующую итерацию цикла, однако функция onloadend все еще может быть выполнение для предыдущего цикла и использование неправильного значения i. Это также испортит остальную часть вашей логики. Что касается вопроса b), я не полностью разобрался в этом, но я заметил, что вы объявили событие click для этого внутри цикла, поэтому некоторые из изображений имели несколько экземпляров этого события, прикрепленного к ним. Мой совет, подождите, пока ВСЕ ваши изображения загрузятся, затем добавьте любой дополнительный HTML, затем настройте все необходимые вам события (например, событие click). Бьюсь об заклад, выпуск b) будет сортировать себя, если вы это сделаете :)