1

<style>
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
</style>

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>    //в коментах кода пишу как я это понимаю и где именно нужна помощь
 //хххххххххххххххххххх скрипт для предпросмотра пользователем изображения перед загрузкой на сервер хххххххххххххх

  function handleFileSelect(evt) { // 2-запускаем функцию обработки события в нее передается объект события
    var files = evt.target.files; // 3-доберемся до файла target чтобы узнать от кого событие, дале к files, массив файлов которые пришли от инпута вызвавшего это событие 
    //4-бежим по массиву в переменную f присваиваем текущий файл
    for (var i = 0, f; f = files[i]; i++) {
     //5-проверим картинка ли это
      if (!f.type.match('image.*')) {
        continue;
      }
      var reader = new FileReader(); //6-создадим экземпляр объекта FileReader()
      
      reader.onload = (function(theFile) {    //8-обработчик события onload в паре с анонимной самовызывающейся функцией в которую на 33 строке мы посылаем переменную f то есть текущий фаил
       //хххххххххххххххххх      ВОПРОС       ХХХХХХХХХХХХХ
        return function(e) { //  9- функция принимает ProgressEvent - событие продолжения загрузки, выгрузки или чтения файла. 
          //НО ГДЕ УКАЗАННО ЧТО ОНА ПРИНИМАЕТ ИМЕННО ЭТО СОБЫТИЯ? 
        //НЕ МОГУ ПОНЯТЬ, ОТ  КУДА ВООБШЕ ЭТА ФУНКЦИЯ БЕРЕТ ИМЕННО ЕГО???
        //  ЧТО ТО ПОХОЖЕЕ МОЖНО ВИДЕТЬ НА 15 СТРОКЕ,НО ТУТ ВСЕ ПРОСТО ЭТО ОБРАБОТЧИК КОТОРЫЙ ВЫЗЫВАЕТСЯ В 39 СТРОКЕ ОТ 
        //СОБЫТИЯ КОТОРОЕ ТУТ ЖЕ И ПЕРЕДАЕТСЯ В ЭТУ ФУНКЦИЮ. А ТО ПРЯМ КАКАЯ ТО ЧУДО ФУНКЦИЯ))))) ПОМОГИТЕ ПОНЯТЬ, ато рука 
        //не поднимается использовать то чего не понимаю 
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };

      })(f);
      // Read in the image file as a data URL.
      reader.readAsDataURL(f); //7-инициализируем асинхронное чтение файла с помощью данного свойства объекта FileReader
    }
  }
  // 1-здесь слушаем событие в случае его возникновения вызываем функцию обработки события
  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

5
  • Если я правильно понял вопрос - обработчик событий получает событие по концепции DOM. Поддержка событий так и происходит. А вообще - задавайте вопрос понятнее...
    – DNS
    13 мая 2017 в 16:35
  • 1
    Обработчик принимает функцию с одним параметром. Назовите его как хотите... Он не пришел, это просто объявление - создается функция с одним аргументом. При вызове этот аргумент передается "окружением" как событие. По протоколам DOM
    – DNS
    13 мая 2017 в 16:46
  • я все это понимаю мне не ясно одно почему окружением передается именно это событие (ProgressEvent) которое мы присвоили переменной (e), во всех других функциях обработчиках событий они запускались из за события и как следствие, события передавались в этот обработчик, здесь же я этого не вижу, я вижу это так обычная анонимная функция которая находится внутри родительской функции, она что то принимает и что то возвращает, а вот родительская запускается по событию onload, 13 мая 2017 в 18:38
  • аж бесит понимаю что пустяк но мне нужно как то понят это,или может ответ такой - так как эта чудо функция внутри родительской функцыи которая является обработчиком события onload, то из за этого наша чудо функцыя и получает именно это событие а не какое либо другое. и если так то должна быть возможность использовать событие и внутри самой родительской функции, и если это так то как его получить именно в ней 13 мая 2017 в 18:39
  • Ну а какая принципиальная разница где объявить функцию. Хоть и по другому событию...
    – DNS
    15 мая 2017 в 3:10

2 ответа 2

0

return function(e) {
// 9- функция принимает ProgressEvent - событие продолжения загрузки, выгрузки или чтения файла.
//НО ГДЕ УКАЗАННО ЧТО ОНА ПРИНИМАЕТ ИМЕННО ЭТО СОБЫТИЯ? ОТ КУДА ВООБШЕ ЭТА ФУНКЦИЯ БЕРЕТ ИМЕННО ЕГО???

здесь (e) - краткая запись (event), на самом деле можно задать любое имя, это формальность. На англоязычном SO есть обсуждение аналогичного вопроса. Подробнее о event object можно прочитать здесь.

0
0

кароче порылся я в документацыи и решил сделать то же только под конкретно мои нужды, и что бы мой мозг не закипал при виде того кода, делает то же смое что и тот чудо код но как по мне более прост и понятен, закину может кому пригодится) пользуйтесь, только расчитана на чтения одного файла, но кому надо цыкл прилепит) или проверки какие)

<style>
    .thumb {
        height: 75px;
        border: 1px solid #000;
        margin: 10px 5px 0 0;
    }
</style>

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>  
    function handleFileSelect(evt) {                 //запускаем функцию обработки события в нее передается объект события
        var files = evt.target.files;                // возьмемем наш фаил точнее масив 
        var file = files[0];
        var reader = new FileReader();               //создадим экземпляр объекта FileReader()
        reader.readAsDataURL(file);                  //читаем фаил с с помощю данного метода
        reader.onload = (function(event) {           //когда читаемтение файла завершено вызываем функцию для отображения картинки и передаем в нее обьект этого событие
        var span = document.createElement('span');
        var image = event.target.result;
        span.innerHTML = '<img class="thumb" src="'+image+'" />';
        document.getElementById('list').insertBefore(span, null);
    });
  }
  // вешаем обработчик на елемент с id files
  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.