How to display the view of the image uploaded through the form?

Question

JavaScript

The people, I don’t know who even with such a question) I think Javascript? In short, I add a picture through the input type file, it is added, but I see only the name, how to look at it before adding it? I found this script

//Вывести загруженную картинку
// function showFile(e) {
//     var files = e.target.files;
//     for (var i = 0, f; f = files[i]; i++) {
//         if (!f.type.match('image.*')) continue;
//         var fr = new FileReader();
//         fr.onload = (function(theFile) {
//             return function(e) {
//                 jQuery('#img_up>img').attr("src",e.target.result);
//                 j('#img_up').css('opacity','1');
//             };
//         })(f);
//
//         fr.readAsDataURL(f);
//     }
// }
//
// document.getElementById('files').addEventListener('change', showFile, false);

But how to do it for the gallery let's say? And in general, are there easier options or will this one work?

Answer 1

Examples are simpler , more complicated
The meaning is the same
1. get a list of files ( FileList )
2. read them using FileReader
3. show a preview