<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>
-
Если я правильно понял вопрос - обработчик событий получает событие по концепции DOM. Поддержка событий так и происходит. А вообще - задавайте вопрос понятнее...– DNS13 мая 2017 в 16:35
-
1Обработчик принимает функцию с одним параметром. Назовите его как хотите... Он не пришел, это просто объявление - создается функция с одним аргументом. При вызове этот аргумент передается "окружением" как событие. По протоколам DOM– DNS13 мая 2017 в 16:46
-
я все это понимаю мне не ясно одно почему окружением передается именно это событие (ProgressEvent) которое мы присвоили переменной (e), во всех других функциях обработчиках событий они запускались из за события и как следствие, события передавались в этот обработчик, здесь же я этого не вижу, я вижу это так обычная анонимная функция которая находится внутри родительской функции, она что то принимает и что то возвращает, а вот родительская запускается по событию onload,– Александр Лычик13 мая 2017 в 18:38
-
аж бесит понимаю что пустяк но мне нужно как то понят это,или может ответ такой - так как эта чудо функция внутри родительской функцыи которая является обработчиком события onload, то из за этого наша чудо функцыя и получает именно это событие а не какое либо другое. и если так то должна быть возможность использовать событие и внутри самой родительской функции, и если это так то как его получить именно в ней– Александр Лычик13 мая 2017 в 18:39
-
Ну а какая принципиальная разница где объявить функцию. Хоть и по другому событию...– DNS15 мая 2017 в 3:10
2 ответа
return function(e) {
// 9- функция принимает ProgressEvent - событие продолжения загрузки, выгрузки или чтения файла.
//НО ГДЕ УКАЗАННО ЧТО ОНА ПРИНИМАЕТ ИМЕННО ЭТО СОБЫТИЯ? ОТ КУДА ВООБШЕ ЭТА ФУНКЦИЯ БЕРЕТ ИМЕННО ЕГО???
здесь (e) - краткая запись (event), на самом деле можно задать любое имя, это формальность. На англоязычном SO есть обсуждение аналогичного вопроса. Подробнее о event object можно прочитать здесь.
кароче порылся я в документацыи и решил сделать то же только под конкретно мои нужды, и что бы мой мозг не закипал при виде того кода, делает то же смое что и тот чудо код но как по мне более прост и понятен, закину может кому пригодится) пользуйтесь, только расчитана на чтения одного файла, но кому надо цыкл прилепит) или проверки какие)
<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>