new FileReader()

一、调用FileReader对象的方法

 方法名 参数 描述abort none 中断读取readAsBinaryString file 将文件读取为二进制码readAsDataURL file 将文件读取为 DataURLreadAsText file, [encoding] 将文件读取为文本

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
**readAsBinaryString：**该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
**readAsDataURL：**这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

二、处理事件

事件 描述
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发，无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中

三、前端图片数据加载显示

<progress id="Progress" value="0" max="100"></progress>
<input type="file" name="file" onchange="showPreview(this)" />
<img id="portrait" src="" width="70" height="75">function showPreview(source) {var file = source.files[0];console.log(file);if(window.FileReader) {var fr = new FileReader();fr.onloadend = function(e) {//                console.log(this.result);document.getElementById("portrait").src = e.target.result;};//给FileReader对象一个读取完成的方法,使用readAsDataURL会返回一个url,这个值就保存在事件对象的result里,img通过加载这个地址,完成图片的加载fr.readAsDataURL(file);}var total = source.files[0].size;fr.onprogress = function(ev) {// 简单测试了一下 大概12M左右的传输速度// 推荐测试的时候用一个视频console.log(ev.loaded / total);var loading = (ev.loaded / total)*100;document.getElementById("Progress").value = loading;}}

四、base64与后台交互

前端代码


<input type="file" id="upload-file">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>// 用户选择图片进行上传// 上传成功, 后台返回图片的URL// 显示在当前页面上document.getElementById("upload-file").addEventListener("change", function(){for (var i = 0; i < this.files.length; i++) {var file = this.files[i];var reader = new FileReader();reader.onload = function (ev) {console.log(ev);console.log(ev.target.result);var base64Str = ev.target.result.split(",")[1];//console.log(base64Str)$.ajax({url: "reImg.php",data: {"base64file": base64Str},type: "post",success: function (res) {createImg(res);}})}reader.readAsDataURL(file);}});function createImg(imgSrc){var theImg = document.createElement("img");theImg.src = imgSrc;document.body.appendChild(theImg);theImg.className = "imgC";}

后端代码

<?php// 接收前端传递过来的base64编码$base64Str = $_POST["base64file"];// 利用方法解码$img = base64_decode($base64Str);// 然后把图片添加到img文件夹下, 图片名, 由当前毫秒数进行md5加密后的字符作为图片名$name = md5(microtime());$result = file_put_contents("img/".$name.".jpg", $img);
//    umask(0777);//正常存入的图片是没有可写权限的,加入具备最高权限chmod("img/".$name.".jpg",0777);// 然后判断如果添加成功, 把这张图片的URL返回给前端if ($result){$s = "http://localhost/BASE64/0301php/day6/uploadMore/";echo $s."img/".$name.".jpg";} else {echo "error";}?>

作者：wyq_0bed
链接：https://www.jianshu.com/p/cde728c4e334
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

new FileReader()相关推荐

html5 FileReader初识
使用html5的FileReader可以实现多媒体文件的预览功能,代码如下: <html> <head> <script type="text/javascri ...
FileReader采用的默认编码
很久以前听教学视频,里面讲到Java采用的默认编码是ISO-8859-1,一直记着. 但是最近重新看IO流的时候,惊讶地发现,在不指定字符编码的情况下,FileReader居然可以读取内容为中文的文本 ...
HTML5 文件域+FileReader 读取文件并上传到服务器(三)
一.读取文件为blob并上传到服务器 HTML <div class="container"><input type=& ...
form 表单 + HTML5(FileReader) +iframe 实现无刷新图片上传+图片预览效果
作为一个初入前端的菜鸟,最近因为一个无刷新上传图片问题走了很多弯路,所以在这里给大家分享一下,不足之处希望谅解.无刷新上传图片一般有两种方式,一种是 form 表单+iframe ,还有一种是 aja ...
HTML5——FileReader详解
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中File对象可以是来自用户在一个 ...
Html5 FileReader 对文件进行Base64编码
以Base64进行编码的数据Url开始越来越广泛的被应用起来,原来做Base64转换要自己写一个小程序来转,其实Html5的FileReader的readAsDataURL方法读取出的数据就已经是Ba ...
毕业论文中使用的技术—FileReader接口
用来把文件读入内存,并且读取文件中的数据. FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据 FileReader接口的方法方法名参 ...
HTML5 通过 FileReader 实现文件上传
概述在页面中上传时,之前一般都是需要使用form表单进行上传.html5 中提供了FileReader 可以将文件转换成Base64编码字符串,因此就可以直接使用 AJAX实现文件上传. 实现代码 ...
FileReader对象和FormData对象
FormData对象一.概述 FormData就是表单数据,我们提交表单所用的数据,H5里新加了FormData对象,可以让我们对表单数据进行操作,甚至自己组装表单数据进行提交,而不是单纯的仅仅是页 ...
FileReader (三) －网页拖拽并预显示图片简单实现
以下是一个很贱很简单的一个在网页上图拽图片并预显示的demo. 我是从https://developer.mozilla.org/en-US/docs/Web/API/FileReader#Stat ...