FileReader读取文件详细介绍请访问:http://www.cnblogs.com/xyyt/p/9066882.html

FileReader提供了如下方法:

readAsArrayBuffer(file) 按字节读取文件内容,结果用ArrayBuffer对象表示
readAsBinaryString(file) 按字节读取文件内容,结果为文件的二进制串
readAsDataURL(file) 读取文件内容,结果用data:url的字符串形式表示
readAsText(file,encoding) 按字符读取文件内容,结果用字符串形式表示
abort() 终止文件读取操作

readAsDataURL和readAsText较为常用,这里以这两个为例,说明具体使用方法:

1.readAsDataURL:readAsDataURL会将文件内容进行base64编码后输出。

由于媒体文件的src属性,可以通过采用网络地址或base64的方式显示,因此我们可以利用readAsDataURL实现对图片的预览。

2.readAsText:导入文档格式文件,默认按Utf-8格式读取,其他格式需要设置编码格式:

readAsText(file,encoding)可按指定编码方式读取文件,但读取文件的单位是字符,故对于文本文件,只要按规定的编码方式读取即可;而对于媒体文件(图片、音频、视频),其内部组成并不是按字符排列,故采用readAsText读取,会产生乱码,因此不是最理想的读取文件的方式。

示例代码如下:

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<style>
.btn-info {
cursor: pointer;
width: 88px;
height: 36px;
line-height: 36px;
color: #fff;
background-color: #5bc0de;
border-color: #46b8da;
border: 1px solid transparent;
border-radius: 4px;
}
</style>
<title></title>
</head> <body>
<div id="app">
<div class="fileBtn">
<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
<input type="file" name="uploadFile" id="uploadFile" @change="readFile" style="visibility:hidden;position:absolute;top:0px;width:0px" />
<!--隐藏默认标签样式-->
</form>
<input type="button" class="btn btn-info" value="导入文档" @click="clickUploadBtn" /> 支持.txt .doc .xls .cvs等文件格式
</div>
<article>
<h4>上传文档预览</h4>
<ul style="list-style: none;">
<li v-for="i in fileData">{{i}}</li>
</ul>
<h4>上传图片预览</h4>
<div><img :src="imgData"></div>
</article>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.config.silent = false;
Vue.config.devtools = true;
var app = new Vue({
el: '#app',
data: {
fileData: [],
imgData:""
},
created: function() {},
mounted: function() {},
methods: {
/**
* 上传按钮单击事件
*/
clickUploadBtn: function() {
//触发file的点击事件
document.getElementById("uploadFile").click()
},
readFile: function() {
var inputBox = document.getElementById("uploadFile");
var fileName=inputBox.value;
var fileType;
var regImg=/(?:jpg|gif|png|jpeg)$/;
var reader = new FileReader();
var self=this;
//发起异步请求
if(regImg.test(fileName)){
//图片格式文件
reader.readAsDataURL(inputBox.files[0]);
reader.onload = function() {
self.imgData=this.result
console.log(this.result)
}
}else{
//其他文档 格式(utf-8编码格式)
reader.readAsText(inputBox.files[0], "utf-8");
reader.onload = function() {
//读取完成后,数据保存在对象的result属性中
self.fileData = this.result.split("\n")
console.log(this.result)
}
}
}
}
})
</script>
</html>

html5文件读取+按钮样式重置+文件内容预览的更多相关文章

  1. nio实现文件读取写入数据库或文件

    1.nio实现读取大文件,之后分批读取写入数据库 2.nio实现读取大文件,之后分批写入指定文件 package com.ally; import java.io.File; import java. ...

  2. SpringBoot读取Linux服务器某路径下文件\读取项目Resource下文件

    // SpringBoot读取Linux服务器某路径下文件 public String messageToRouted() { File file = null; try { file = Resou ...

  3. 使用java的 htpUrlConnection post请求 下载pdf文件,然后输出到页面进行预览和下载

    使用java的 htpUrlConnection post请求 下载pdf文件,然后输出到页面进行预览和下载 2018年06月07日 10:42:26 守望dfdfdf 阅读数:235 标签: jav ...

  4. FileUpload控件实现单按钮图片自动上传并带预览显示

    FileUpload控件实现单按钮图片自动上传并带预览显示 1.实现原理:   FileUpload控件默认不支持服务端的ONCHANGE事件,此时用一种变通的方法借用客户端的onchange事件,调 ...

  5. Vue.js +pdf.js 处理响应pdf文件流数据,前端转图片预览不可下载

    使用场景及原因 实际业务中,一些说明书或协议仅支持用户在线预览,为避免用户自行下载,并进行修改,引发纠纷,特将文件已文件流的形式,传给前端并转为图片显示,此时可能会有人问,为什么不直接在后端转图片,前 ...

  6. [java]文件上传下载删除与图片预览

    图片预览 @GetMapping("/image") @ResponseBody public Result image(@RequestParam("imageName ...

  7. python自动化之上传文件的3种方法和图片预览

    ajax上传文件的三种方法 第一种xhr提交 function xhrSubmit(){ // $('#fafafa')[0] var file_obj = document.getElementBy ...

  8. Java 文件本地上传、下载和预览的实现

    以下方法为通用版本 实测图片和pdf 都没有问题 上传方法需要前端配合post请求 ,下载前端用a标签就可以,预览 前端使用ifrme标签   ,就可以实现基本功能... 1.文件本地上传 publi ...

  9. input file样式修改,图片预览删除功能

    本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...

随机推荐

  1. linux RPM包管理

    查询系统是否安装某个应用 rpm  -qa | grep  xx 查询系统某个应用的版本信息 rpm  -qi  软件包信息 查询某个软件的安装位置 rpm  -ql  软件包名 查询文件属于哪个软件 ...

  2. ABAP-container拆分

    1.界面 2.代码 *&---------------------------------------------------------------------* *& Report ...

  3. NGUI 背景图自适应

    背景图UISprite组件调整如下: UIRoot设置: 不保持比例自适应: 保持宽与屏幕宽一致,高度随宽的缩放比例进行缩放:

  4. Oracle重建表空间操作实例

    由于环境维护或者性能测试需要,经常需要对表空间进行重建操作.重建表空间操作主要分3中情况介绍,分别是业务表空间.临时表空间和回滚段表空间的重建. 重建业务表空间 由于业务规划要求,重建后的业务表空间名 ...

  5. LeetCode OJ 49. Group Anagrams

    题目 Given an array of strings, group anagrams together. For example, given: ["eat", "t ...

  6. Android-Anim-Playground

    Android-Anim-Playground Latest animation ideas I developed to make apps more attractive. Why having ...

  7. spring boot 访问jsp 弹出下载

    在pom.xml中加入以下jar 包 <!-- 引入Spring Boot 内嵌的Tomcat对jsp的解析包--><dependency> <groupId>or ...

  8. 关于scp在zsh报错:zsh:no matches found :

    我要将某一目录下面所有文件拷贝的时候,scp *.jpg 的时候,报错 zsh: no matchs found:path 其实是zsh自己解析了*号,所以,只要给*加上就可以了\ scp \*.jp ...

  9. MATLAB总结二

    1.如何将一个多项式中的系数按照幂次提取出来? sym2poly(ans) %ans为一个多项式. 2.在写第二份模式识别的大作业时遇到如下困难: 每个样本贡献给总概率的是一个关于x的表达式,我将所有 ...

  10. php mysql 查询判断周几

    $where .= " and (DAYOFWEEK( from_unixtime(`px_time`, '%Y-%m-%d')) = 1)";  //周日从1开始