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)


相关推荐

  • MATLAB 2018b 安装与简介

    MATLAB 2018b 安装与简介matlab2018b安装教程该版本是mathworks官方开发的新版本的商业数学软件,可以帮助用户不仅仅将自己的创意停留在桌面,还可以对大型数据集运行分析,并扩展到群集和云。另外matlab代码可以与其他语言集成,使您能够在Web、企业和生产系统中部署算法和应用程序。与matlab2018a相比,matlab2018b拥有更多数据分析、机器学习和深度学习选项,并且速度比以往更快。其亮点…

  • C# WinForm界面美化插件简介

    C# WinForm界面美化插件简介 美化C#的WIN程序界面可以考虑用第三方控件,比如DotNetBar或DevExpress。但是它们都是收费的,虽然有破解版。。但是使用时还是需要权衡的。另外,用第三方控件会让运行速度下降。 1.      DevExpress收费软件 2.      Rad 3.      Irisskin2在项目中添加DLL文件,在程序中控制显示即可。使

  • 常见的数据库有哪几种?[通俗易懂]

    常见的数据库有哪几种?[通俗易懂]SQL(StructuredQueryLanguage,结构化查询语言)是一种数据库查询语言和程序设计语言,主要用于管理数据库中的数据,如存取数据、查询数据、更新数据等。SQL是IBM公司于1975—1979年之间开发出来的,在20世纪随着数据库技术的发展,数据库产品越来越多,如Oracle、DB2、MongoDB、SQLServer、MySQL等。1.Oracle数据库Oracle数据库管理系统是由甲骨文(Oracle)公司开发的,在数据库领域一直处于领先地位。目前,Oracle数据库覆盖了大、中

  • 深入FFM原理与实践(美团点评技术)

    深入FFM原理与实践(美团点评技术)from: https://tech.meituan.com/deep-understanding-of-ffm-principles-and-practices.htmlFM和FFM模型是最近几年提出的模型,凭借其在数据量比较大并且特征稀疏的情况下,仍然能够得到优秀的性能和效果的特性,屡次在各大公司举办的CTR预估比赛中获得不错的战绩。美团点评技术团队在搭建DSP的过程中,探索并使用了FM

  • pycharm中pip install如何使用_pycharm使用pip安装第三方库

    pycharm中pip install如何使用_pycharm使用pip安装第三方库pyCharm如何使用通过CMDpipinstall方式安装的依赖包前言将pyCharm的解释器设置成Python解释器的方法前言在window下通过cmd(win+r打开运行,然后输入cmd,按下回车即可打开)方式来安装Python依赖包是一种方便快捷的方式。但是往往很多时候由于pyCharm与Python安装在不同的路径,即使你已经用cmdpipinstall的方式在你的电…

发表回复

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

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