大家好,又见面了,我是你们的朋友全栈君。
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
})
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/160972.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...