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;
            };
        }
    }