FileReader对象

　　在一些项目中，经常会遇到图片上传的情况，为了提高用户体验，一般会要求选择图片后 能预览一下图片。

　　以前的做法是 通过 ajax上传图片后，然后再显示出来，这样会产生大量的无用的图片文件，在HTML5的时代，有了FileReader对象，可以在浏览器选择本地的图片后，立马就可以在浏览器中显示选择的图片。

　　使用如下：

　　HTML代码：

    <div style="width:200px;">

            <p><img id="img" src="" alt="头像"/></p>

            <p><input type="file" id="file" name="file" onchange="imgPreview();"/></p>

            <p>账户：<input type="text" id="username"/></p>

            <p>密码：<input type="password" id="password"/></p>

            <p><input type="button" value="注册" onclick="register();"/></p>

    </div>

　　

　　JS代码(使用了JQuery)：

    /*

        选择图片后图片预览

    */

    function imgPreview(){

        if(typeof FileReader != 'undefined'){ //支持

            //获取上传文件

            var file = $('#file')[0].files[0];

            //是否对应图片格式

            if(!/image\/\w+/.test(file.type)){ //不是图片格式

                alert('请选择图片！');

                return false;

            }

            var reader = new FileReader();

            //将文件以DataURL的形式读入

            reader.readAsDataURL(file);

            //读入完毕以后

            reader.onload = function(e){

                //显示文件

                $('#img')[0].src = this.result;

            };

        }

    }