input file读取文件

input file读取文件js读取inputfile文件的两种方式:<divid="localImag"><imgid="preview"src=""width="150"height="180"style="display:block;width:150px;height:180px;"><

大家好,又见面了,我是你们的朋友全栈君。

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账号...

(0)


相关推荐

  • 字符串常量池概述[通俗易懂]

    字符串常量池概述[通俗易懂]字符串常量池概述常量池表(Constant_Pooltable)Class文件中存储所有常量(包括字符串)的table。这是Class文件中的内容,还不是运行时的内容,不要理解它是个池子,其实就是Class文件中的字节码指令。运行时常量池(RuntimeConstantPool)JVM内存中方法区的一部分,这是运行时的内容。这部分内容(绝大部分)是随着JVM运行时候,从常量池转化而来,每个Class对应一个运行时常量池。上一句中说绝大部分是因为:除了Class中常量池内容,还可能包括

  • 一篇文章搞定java中的垃圾回收机制面试题[通俗易懂]

    一篇文章搞定java中的垃圾回收机制面试题[通俗易懂]  一篇文章搞定java中的垃圾回收机制面试题任何语言在运行过程中都会创建对象,也就意味着需要在内存中为这些对象在内存中分配空间,在这些对象失去使用的意义的时候,需要释放掉这些内容,保证内存能够提供给新的对象使用。对于对象内存的释放就是垃圾回收机制,也叫做gc,对于java开发者来说gc是一个双刃剑我们这里找了两张搞笑图片分别来表示c语言的垃圾回收和java的垃圾回收。注意:并…

  • isnotempty和isnotnull_isannotationpresent()用法

    isnotempty和isnotnull_isannotationpresent()用法转自:http://www.zhenhua.org/article.asp?id=625 isNotEmpty将空格也作为参数,isNotBlank则排除空格参数参考QuoteStringUtils方法的操作对象是java.lang.String类型的对象,是JDK提供的String类型操作方法的补充,并且是null安全的(即如果输入参数String为null则

  • jsonfield注解不生效(write javabean error fastjson)

    @jsonfield看源码它可以作用于字段和方法上。引用网上说的,一、作用field@jsonfield作用在field时,其name不仅定义了输入key的名称,同时也定义了输出的名称。但是我在使用中,发现并不如上所说。例如@jsonfield(name=”project_id”)privatelongprojectid发现bean转json的时候并是”project_id”:xxx的形式,…

  • 学习Java编程入门书籍

    学习Java编程入门书籍分享几本java编程入门书籍,文章转自知乎路人甲《HeadFirstJava》《HeadFirstJava》被亚马逊评为十大好书之一。在京东计算机类书籍中热度排名第16位,在Java类书籍中排名第2位。豆瓣评分为8.8分,有百分之54.4%的读者给出了五星评价。在知乎社区中有来自无数位的大神做推荐。哪本书适合推荐给Java初学者?-书籍推荐《HeadFirstJava》…

  • 十进制小数分数与二进制的转换

    十进制小数分数与二进制的转换十进制分数转换为二进制数使用短除法。例如将十进制分数11/28转换为二进制数,过程如下:1、首先将分子分母分别转换成二进制(11)10=(1011)2(28)10=(11100)22、使用短除,借位时是借2,商只能是0或1所以:11/28=1011/11100=0.01100100…十进制小数转换为二进制小数十进制数的整数位是二进制数的整数位,…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号