学习FileReader在图片上传前预览方面的总结

近期因为写代码的时候要写图片的上传以及上传之前的预览，因此粗浅的学习了一部分的File Reader用于读取文件的数据，以下是我的学习笔记。                                                                   

FileReader（）函数用于创建一个新的FileReader对象,是属于Java的一个类。我对FileReader（）的使用目前为止主要是使用它的预览图片的功能，                                                                        

function previewbeforeupload() {
            var preview = document.querySelector('#see');
            var files   = document.querySelector('input[type=file]').files;
            function Preview(file) {
            // 确保file.name符合我们要求的扩展名
                    var readthis = new FileReader();              //创建一个FileReader()模型
                    readthis.addEventListener("load", function () {
                    var image = new Image();                    //创建一个img对象，相当于给浏览器缓存了一张图片
                    image.height = 100;           //定义图片高度为100px，从而限定图片大小
                    image.src = this.result;      //图片的src是点击的结果
                    preview.appendChild(image);   //把img加到preview里面
                    }, false);
                    reader.readAsDataURL(file);   //读取一个file对象，同时result属性包含了图片的URL格式字符串
            }
            if (files) {
            [].forEach.call(files, Preview);//[]是一个用不到的空数组，用于访问与数组有关的方法
                                                   //forEach是对数组的每一个元素执行一次函数
                                                   //就是说如果files不为null的话，每个元素执行一遍readAndPreview
            }
        }

在这里，我使用了type类型为file的input框，并且读取了通过它选中的文件，然后通过了readAsDataURL，将文件转换为base64编码的字符串形式，在创建了一个以它为url的img标签，这样的话，img标签里显示的就会是刚刚选中的图片，从而实现在将图片上传之前的预览。

在这里，还使用了[].forEach.call(files.Preview)用于对每一个通过type类型为file的input框获取到的文件执行Preview函数，同样使用了addEventListener("load",{}）这一监听事件，是在这块的代码执行完之后执行的函数，从而可以使用用readAsDataURL转换过来的url串。