input file读取文件

js读取 input file 文件的两种方式：

<div id="localImag"><img id="preview" src="" width="150" height="180" style="display: block; width: 150px; height: 180px;"><input type="file" name="img" id="docfile" style="width:150px;" onchange="setImagePreview();">
</div>

1.使用FileReader读取图片（转化为base64）

function setImagePreview() {var docObj = document.getElementById("docfile");var imgObjPreview = document.getElementById("preview");console.log(docObj.files[0])if (docObj.files && docObj.files[0]) {var reader = new FileReader();reader.readAsDataURL(docObj.files[0]);//发起异步请求reader.onload = function(){//读取完成后，数据保存在对象的result属性中// console.log(this.result)imgObjPreview.src=this.result}}
}

主要使用readAsDataURL去完成转换base64，如果是文档，也可以用readAsText(file,encoding)去读取。

方法

FileReader提供了如下方法：

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

readAsDataURL和readAsText较为常用，这里只对这两者进行说明。

2.使用 window.URL.createObjectURL 读取图片（转化为blod）(推荐)

function setImagePreview() {var docObj = document.getElementById("docfile");var imgObjPreview = document.getElementById("preview");console.log(docObj.files[0])if (docObj.files && docObj.files[0]) {imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);}
}

总结

按照前辈们的说法，creatObjectURL可以有更好的性能，或许是浏览器自带接口的原因, 可以处理的更快。

而且最近做了一个需要上传图片预览的项目，用的最简单的input file上传，最开始想到的就是用filereader实现前端预览，很简单，见前面的第一段代码，在自己手机上测试，没问题。但在某些奇葩手机上，比如oppo 安卓4.3在我们app的webview内通过打开相册上传发现无法预览图片！但在该手机的微信，浏览器内上传均可以！所以推荐使用window.URL.createObjectURL

最后如果需上传，可以使用form或者使用ajax上传，form表单提交比较简单，就不介绍。

ajax提交的时候原理还是获取到obj.files[0]后。利用实例化的FormData 上传文件。如：

let fileObj = this.$refs.fileObj.files[0]; // js 获取文件对象var formData = new FormData();formData.append('file', fileObj);axios({url: process.env.URL_PATH + '/mallSealApply/uploadSealApply',method: 'post',headers: {'Authorization': this.$store.state.token},data: formData})

input file读取文件相关推荐

input file获取文件路径_python 基础 — 整理文件
点击上方蓝字"Python圈子",进行关注~ 前言文件整理常常会浪费很多时间.但如果让机器来做这样复杂的事情,不到 10 秒钟就能完成 1 个小时工作. 整理方式进行文件整理最 ...
html file自动获取文件路径,input file获取文件路径时无法获取正确的路径
页面有一个input file服务器控件,一个div,div是image标签的容器,当点击input file的值改变,我们往div里追加image标签:但当通过js的onchange事件动态获取in ...
file input 点击没反应_动态input file多文件上传到后台没反应的解决方法！！！
其实我也不太清除具体是什么原因,但是后面就可以了!!! 我用的是springMVC 自带的文件上传 1.首先肯定是要有springMVC上传文件的相关配置! 2.前端这是动态input file上传 ...
input file 选择文件后自动上传文件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
html读取url中文件,HTML5基础知识 - JavaScript API - File - 读取文件为DataURL
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 // Content section used alot var content = document.ge ...
input file获取文件路径
html代码段: <input type="file" @change.prevent.stop="upload"> vue 中script代码段: ...
java File读取文件始终不存在的问题分析
先上图: 如图,f1 始终能读到该文件,使用的是绝对路径 f2 却是相对路径. 感觉很奇怪,明明一模一样的代码为什么会产生不同的结果呢? 首先想到的是是不是有什么特殊字符.. 拿到notepad++中 ...
html只允许上传xlsx,input file限制上传文件类型的方法
在前端html中,上传文件时,一般都是用到 type 属性值为 file 的 input 标签,但在默认情况下,file 类型的 input 标签是不限制选择本地文件的类型的,那么本篇博文,飞鸟慕鱼就 ...
js文件上传以及js清空input file值
最近项目中遇到文件上传的案例, 之前涉及文件上传的较少, 今天针对js文件上传的案例做一个详细的教程,方便日后查阅! 本教程从原生JS, jQuery, 两处着手简单介绍文件上传案例 1.原生JS ...

input file读取文件

input file读取文件相关推荐

最新文章

热门文章