FileReader上传图片预览

来源:互联网 发布:什么叫编程 编辑:程序博客网 时间:2024/05/17 22:35
<img scr="" id="upload-preview"><input type="file" id="upload-img"><script type="text/javascript"> $('#upload-img').change(function(){    var files = this.files[0];    if(window.FileReader){//检测浏览器对FileReader的支持        var filereader = new FileReader();        filereader.readAsDataURL(files);//调用FileReader对象的方法        filereader.onloadend = function(e){            $('#upload-preview').attr('src',e.target.result);        }    }})</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  读取中
原创粉丝点击