filereader

body: <input type=" file" id=" img" type=" file" onchange=" up()" style=" width: 100%;height: 100%;position:absolute ;top: 0;left:0;opacity: 0;"> js: imgData=''; code=26; function up(){ var img=document.getElementById('img'); var imgFile = new FileReader(); imgFile.readAsDataURL(img.files[0]); imgFile.onload = function () { imgData = this.result; //base64数据 // imgShow.setAttribute('src', imgData); // conte.value = imgData; if(imgData){ zp='1' //$api.dom('#xzzp').setAttribute("src",ret.base64Data) document.getElementById('xzzp').setAttribute("src",imgData) } } } 来源： https://www.cnblogs.com

html ：采用了layui框架样式，（可自己写）： js如下: function getFileContent() { /*1.创建文件读取对象*/ var reader = new FileReader (); /*2.读取文件，获取DataURL*/ var file = document .querySelector("#imageUrl"). files ; reader.readAsDataURL(file[0]); /*获取数据*/ reader.onload = function () { //console.log(reader.result); /*展示*/ document .querySelector("img"). src = reader. result ; } reader.onprogress = function (e) { var percent = e.loaded / e.total * 100 + "%"; div.style. width = percent; } } 来源： https://www.cnblogs.com/bagnliu/p/7879426.html

写在前面 前一篇文章介绍了HTML5中的Blob对象（详情戳 这里 ），从中了解到Blob对象只是二进制数据的容器，本身并不能操作二进制，故本篇将对其操作对象FileReader进行介绍。 FileReader FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。 使用FileReader对象，web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容，可以使用File对象或者Blob对象来指定所要处理的文件或数据。 创建实例 var reader = new FileReader(); 方法 方法定义 描述 abort():void 终止文件读取操作 readAsArrayBuffer(file):void 异步按字节读取文件内容，结果用ArrayBuffer对象表示 readAsBinaryString(file):void 异步按字节读取文件内容，结果为文件的二进制串 readAsDataURL(file):void 异步读取文件内容，结果用data:url的字符串形式表示 readAsText(file,encoding):void 异步按字符读取文件内容，结果用字符串形式表示 事件 事件名称 描述 onabort 当读取操作被中止时调用 onerror 当读取操作发生错误时调用 onload

FileReader接口可使web程序异步读取用户电脑上文档的内容（或原始数据缓冲区），使用File或是Blob对象来指定需要读取的文件或数据。 File对象可以通过多种方式获得：用户使用<input>元素在文件列表中选择；通过拖放的操作使用DataTransfer对象获取；也可使用HTMLCanvasElement中的mozGetAsFile()接口获取。 构造函数 FileReader() 返回一个新建FileReader 属性 FileReader.error(只读): 一个DOMError接口反映了读取文件过程中的错误。 FileReader.readyState(只读)：一个表明了FileReader状态的数字，数字列表如下： EMPTY 0 没有数据加载 LOADING 1 数据正在加载 DONE 2 全部读取请求已完成 FileReader.result(只读)：被选定文件的内容。这个属性在读取操作完成后才可用，数据格式取决于初始化读取操作时选择的方法。 事件处理程序 FileReader.onabort： 中断事件的处理程序，读取操作被中止触发该事件。 FileReader.onerror：错误事件的处理程序，读取操作时每次遇到错误触发该事件。 FileReader.onload：加载事件的处理程序，读取操作成功完成时触发该事件。 FileReader

　　 记得以前做网站时，曾经需要实现一个图片上传到服务器前，先预览的功能。当时用html的<input type="file"/>标签一直实现不了，最后舍弃了这个标签，使用了其他方式来实现了这个功能。 　　今天无意发现了一个知识点，用html的file标签就能实现图片上传前预览，感觉很棒，记录一下！就是通过file标签和js的FileReader接口，把选择的图片文件调用readAsDataURL方法，把图片数据转成base64字符串形式显示在页面上。 1、闲话少说，测试一下，图片上传前预览(选择图片)： 实现代码： <div style="border:2px dashed red;"> <p> 图片上传前预览：<input type="file" id="xdaTanFileImg" onchange="xmTanUploadImg(this)" accept="image/*"/> <input type="button" value="隐藏图片" onclick="document.getElementById('xmTanImg').style.display = 'none';"/> <input type="button" value="显示图片" onclick="document.getElementById('xmTanImg').style.display =

1.File类 　　File类被定义为“文件和目录路径名的抽象表示形式”，这是因为File类既可以表示“文件”也可以表示“目录”，他们都通过对应的路径来描述。通过构造函数创建一个File类对象，则该对象就是指定文件的引用，可以通过该对象对文件操作。通过File对象，可以获取文件的属性值（文件大小，能否读写，最后修改时间等）。File对象不能对文件进行读取和写入的操作，如果想要对文件进行读写，那么要使用IO流。 　　以下函数是File类使用示例。它的功能是，将一个文件的路径传入函数，函数判断此路径是否有文件，如果此路径没有指向任何文件或目录，那么判断这个路径里是否有"."，如果有，那么创建这个路径的文件，如果没有，创建这个目录。如果有文件，则判断此路径是文件还是目录，如果是文件，则显示它的一系列属性，如果是目录，那么后续用递归的方式显示它及其子目录下的文件。文件路径有两种表示方法，一种是绝对路径，一种是相对路径。绝对路径是带盘符的，相对路径是相对于当前目录的路径。 1 public void testFile(String path){ 2 File file = new File(path); 3 if(file.exists()){ 4 //如果文件存在，再获取属性值 5 //TODO:获取文件大小 6 if(file.isFile()){ 7 System.out