广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS使用base64格式上传文件
  • 907
分享到

JS使用base64格式上传文件

2024-04-02 19:04:59 907人浏览 薄情痞子
摘要

本文实例为大家分享了js使用base64格式上传文件的具体代码,供大家参考,具体内容如下 html页面 <input type="file" id="fielinput" /&

本文实例为大家分享了js使用base64格式上传文件的具体代码,供大家参考,具体内容如下

html页面

<input type="file" id="fielinput" />
<img id="txshow" style="width:100px;height:100px;"/>
<br/>解析之后的base64数据:<br/>
<p id="data"></p>

js部分




var input = document.getElementById("fielinput");
input.addEventListener('change', readFile, false);
function readFile() {
   var file = this.files[0];
    //判断是否是图片类型
    
    var reader = new FileReader(); // 返回一个新的FileReader函数
    reader.readAsDataURL(file);
    reader.onloadstart = function (e){ 
        console.log(e)
        console.log('开始了')
    }
    reader.onprogress = function(e){
        console.log(e)
    }
    reader.onload = function (e) {
        console.log(e);
        console.log(reader.result);
        txshow.src = this.result;
        document.getElementById("data").innerText=this.result.substring(this.result.indexOf(',')+1);
    }
    reader.onloadend = function(e){
        console.log(e)
        console.log('结束了')
    }
}

小提示

function fileFORMData(files){
    console.log(this.files[0])
    console.log(files.target.files[0])
}

在上传文件中,this.files[0]全等于files.target.files[0]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: JS使用base64格式上传文件

本文链接: https://www.lsjlt.com/news/164271.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JS使用base64格式上传文件
    本文实例为大家分享了JS使用base64格式上传文件的具体代码,供大家参考,具体内容如下 html页面 <input type="file" id="fielinput" /&...
    99+
    2022-11-13
  • 多个上传文件如何使用js验证文件格式和大小
    小编给大家分享一下多个上传文件如何使用js验证文件格式和大小,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!html部分:&nbs...
    99+
    2022-10-19
  • js利用FileReader实现图片转base64格式并上传预览头像
    目录页面布局:思路分析:代码:修改用户头像,一般都会需要把图片转成base64格式,所以我们需要学会怎么利用FileReader转换 页面布局: <template> ...
    99+
    2022-11-13
  • js怎么利用FileReader实现图片转base64格式并上传预览头像
    今天小编给大家分享一下js怎么利用FileReader实现图片转base64格式并上传预览头像的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一...
    99+
    2023-06-30
  • js 实现文件上传样式详情
    目录1、概述2、创建对象的参数3、监听例子4、使用方法5、源代码1、概述 这个js包括按钮样式,列表样式、带有删除、添加、放大(使用的是自带的放大功能,提供有API来放入你的弹窗...
    99+
    2022-11-12
  • Vue使用formData格式类型上传文件的示例
    在vue中,我们普遍是前后端分离项目,即需要使用axios等工具向后台发送请求实现对数据的操作。 其中,文件上传算是比较难的一种。这篇文章五分钟教会你上传文件。 1.如图片上传,后端...
    99+
    2022-11-12
  • js如何自定义input文件上传样式
    这篇文章主要介绍js如何自定义input文件上传样式,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!先看效果:代码贴出来: 方法1<!--   &n...
    99+
    2022-10-19
  • JS文件上传时如何使用MD5加密
    目录JS文件上传使用MD5加密什么是MD5?MD5怎么用?前端中md5的用法md5的使用方法JS文件上传使用MD5加密 什么是MD5? MD5信息摘要算法(英语:MD5 Messag...
    99+
    2022-11-13
  • element-ui el-upload实现上传文件及简单的上传文件格式验证功能
    在后台管理系统中总是会用到上传文件的功能, 想实现的样式如下:(实现上传文件后,在input输入框显示文件名 ) 结构代码如下: <el-form-item label="...
    99+
    2022-11-16
    文件上传elementUI中upload el-upload上传图片 element ui 上传
  • PHP多文件上传实现格式化的方法
    这篇文章主要介绍PHP多文件上传实现格式化的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!php有什么特点1、执行速度快。2、具有很好的开放性和可扩展性。3、PHP支持多种主流与非主流的数据库。4、面向对象编程:...
    99+
    2023-06-15
  • 怎么用原生JS实现文件上传
    本篇内容主要讲解“怎么用原生JS实现文件上传”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用原生JS实现文件上传”吧!一、目的:实现上传图片功能二、效果:三、思路:用input标签自带的上传...
    99+
    2023-07-02
  • SpringBoot 上传文件判空以及格式检验流程
    目录加入依赖创建自定义注解以及实现类全局异常处理使用示例结果展示基于jsr303 通过自定义注解实现,实现思路: 存在一些瑕疵,后续补充完善。 加入依赖 部分版本已不默认自动引入该...
    99+
    2022-11-13
  • Python使用FTP上传文件
    Python使用FTP上传文件 本文主要介绍如何使用Python通过FTP上传文件。 FTP简介 FTP即文件传输协议(File Transfer Protocol),是用于在网络上进行文件传输的一种...
    99+
    2023-09-07
    python 服务器 网络
  • Nodejs如何把接收图片base64格式保存为文件存储到服务器上
    这篇文章主要为大家展示了“Nodejs如何把接收图片base64格式保存为文件存储到服务器上”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Nodejs如何把接收...
    99+
    2022-10-19
  • SpringBoot实现PPT格式文件上传并在线预览功能
    1、需要引入依赖 <dependency> <groupId>com.itextpdf</groupId> ...
    99+
    2022-11-13
  • 轻量应用服务器上传网页文件是什么格式的
    轻量应用服务器的主要特点包括: 轻量级:采用较小的硬件和处理器,可以减少服务器的负载和能耗。 快速部署:只需几分钟就可以将应用程序部署到轻量应用服务器上,从而加快了应用程序的部署速度。 低成本:与传统应用服务器相比,轻量应用服务器通常采...
    99+
    2023-10-28
    上传 格式 服务器
  • 使用RestTemplate 调用远程接口上传文件方式
    目录RestTemplate 调用远程接口上传文件问题描述解决方法第一种方式第二种方式RestTemplate调用远程接口添加请求头RestTemplate 调用远程接口上传文件 问...
    99+
    2022-11-12
  • 使用AJAX实现上传文件
    本文实例为大家分享了使用AJAX实现上传文件的具体代码,供大家参考,具体内容如下 需求: 在前端页面选择文件上传到服务器的指定位置 前端代码 <form id="upl...
    99+
    2022-11-12
  • 怎么使用GitHub上传文件
    这篇文章主要介绍了怎么使用GitHub上传文件的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么使用GitHub上传文件文章都会有所收获,下面我们一起来看看吧。一、注册GitHub账号首先,在GitHub上传文...
    99+
    2023-07-05
  • 如何使用Servlet上传文件
    如何使用Servlet上传文件?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。一、Servlet实现文件上传,需要添加第三方提供的jar包下载地址:1) commons-fi...
    99+
    2023-05-31
    servlet 文件上传
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作