首页 > 其他分享 >FileReader读取文件(文本和图片)

FileReader读取文件(文本和图片)

时间:2023-05-12 22:44:09浏览次数:35  
标签:读取 img FileReader let result file 文本

1.读取文本

                let file = input_file.files[0]
                let fr = new FileReader();
                fr.readAsText(file,'gb2312');  //设置文本格式
                fr.onload = function() {
                   document.body.innerHTML = this.result;
                   console.log(this.result);
                }

2.读取图标做预览图片

                let fileSize = file.size / 1024;  //转换大小单位kb
                let fileMix = file.slice(0,1000); //截取文件
                let img = new Image();   //创建一个图片对象
                let fileReader = new FileReader(); //创建一个FileReader
                fileReader.readAsDataURL(file);  // 读取文件
                fileReader.onload = function() {  // 异步加载
                   
                    img.width = '300'
                    img.height = '500'
                    img.src = this.result;
                    img.border = '3px solid #ccc'
                   document.body.appendChild(img)
                }

标签:读取,img,FileReader,let,result,file,文本
From: https://www.cnblogs.com/StevenYF/p/17396461.html

相关文章

  • JavaWeb过滤器读取并修改POST请求的参数-YhtHttpServletRequestWrapper
    核心原理就是一个类:javax.servlet.http.HttpServletRequestWrapper一个简单的例子,当任何请求的参数里有aaa的时候,把它的值改成bbb新增一个类自定义的类CustomHttpServletRequestWrapper importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpSer......
  • 富文本编辑器 VUE-QUILL-EDITOR 使用教程 (最全)
    VUE-QUILL-EDITOR基于QUILL、适用于VUE的富文本编辑器,支持服务端渲染和单页应用,非常高效简洁。一.基础用法1、NPM导入VUE-QUILL-EDITORnpminstallvue-quill-editor--save2、引入VUE-QUILL-EDITOR在全局中引入importVuefrom'vue'importVueQuillEditorfrom'v......
  • 文本格式大全
    文本格式是用于表示文本内容的一种规范或标准。常见的文本格式包括:纯文本格式(.txt):仅包含文本内容,没有格式和样式,通常用于存储简单文本数据,如日志文件和配置文件等。RTF格式(.rtf):是一种文本格式,可以包含文本格式、字体、大小、颜色、图像等,常用于文字处理软件中。INI(Initial......
  • UOS下使用HHDESK文本编辑功能
    UOS系统现在正处于起步阶段,许多功能未能完善,这便需要软件支撑。HHDESK的文本编辑功能,便能帮上忙。只需在首页点击文本编辑功能便可。笔者习惯于使用页面分离功能,这样可以随意调节窗口大小。操作为右键标签——分离。建议在设置里面勾选自动换行,更加符合我们的阅读习惯。方便......
  • go 读取目录与cp
     利用ioutil的ReadDir方法:packagemainimport("fmt""io/ioutil")funcmain(){files,_:=ioutil.ReadDir("./")for_,f:=rangefiles{fmt.Println(f.Name())}} 利用filepath的Glob方法:packagemainimp......
  • 去掉特殊字符(udc52),文本显示是空格
    百度好久,正则处理(字符显示�......
  • JavaFx 关键字高亮文本实现
    原文地址:JavaFx关键字高亮文本实现-Stars-One的杂货小窝整蓝奏云批量下载器里的搜索功能想到的一个关键字高亮功能,借助textflow组件来实现,记录一下本文基于TornadoFx框架进行编写,封装工具代码是kotlin版本然后也是顺便把这个封装成了stars-one/common-controls里的xHig......
  • python读取txt文本匹配excel内容
    别人的需求,一个小脚本、代码如下:importopenpyxl#打开Excel文件path=r'D:\Paper\data_late.xlsx'workbook=openpyxl.load_workbook(path)#获取第一个工作表worksheet=workbook.active#获取字符串列的值,并将其转换为列表strings=[cell.valueforcelli......
  • getPhysicalNumberOfCells读取excel表格数据,清除空行后代码仍然识别空行,(已解决)
     表格只有几十行数据,但是getPhysicalNumberOfCells读取时还有800多行,原因在于之前把表格数据拓展到了800行,清除数据时,表格的样式为更改,可以尝试使用格式刷复制空行格式刷到错误空行上但是我试了没有用,反而还多了几十行,然后尝试用代码判断空行,只有格式没有数据的空行全部删除,......
  • 能粘贴Word 内容(含公式)的富文本编辑器
    ​ 当前功能基于PHP,其它语言流程大致相同 1.新增上传wordjson配置在ueditor\php\config.json中新增如下配置:     /* 上传word配置 */    "wordActionName":"wordupload",/* 执行上传视频的action名称 */    "wordFieldName":"upfile",/* 提交的......