JavaScript中利用FileReader实现上传图片前本地预览

<img scr="" id="upload-preview">
<input type="file" id="upload-img">
<script type="text/javascript">	
	$('#upload-img').change(function(){
        var files = this.files[0];
        var filereader = new FileReader();
        var formData = new FormData();
        //设置头像参数
        formData.append('head_img',files);
        //还可以设置其他参数
        formData.append('rests_param','value');
        //通过文件流将文件转换成Base64字符串
        filereader.readAsDataURL(files);
        //转换成功后
        filereader.onloadend = function(e){
            $('#upload-preview').attr('src',e.target.result);
            $.ajax({
                url:'{:url("/member/modifyPerson")}',
                type:'post',
                dataType:'json',
                data:formData,
                cache:false,
                contentType:false,
                processData:false,
                success:function (res) {
                    console.log(res);
                }
            })
        }
    })
</script>

FileReader对象的方法
FileReader 的拥有 4 个方法，其中 有3 个用来读取文件，另1个用来中断读取。
　1、abort(); 中断读取
　2、readAsBinaryString(file);　该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
　3、readAsDataURL(file); 该方法将文件读取为一段以 data: 开头的字符串，这段字符串就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案，这里的小文件通常是指图像与 html 等格式的文件。
　4、 readAsText(file,[encoding]); 将文件以文本方式读取，读取的结果即是这个文本文件中的内容。该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。
​
FileReader处理事件
　1、onabort 中断时触发
　2、onerror 出错时触发
　3、onload 文件读取成功完成时触发
　4、onloadend 读取完成触发，无论成功或失败
　5、onloadstart 读取开始时触发
　6、onprogress 读取中