如何将input type="file"选中的文件转换成Base64的字符串呢？

1、首先了解一下为什么要把图片文件转换成Base64的字符串

在常规的web开发过程中，大部分上传文件都是在web页面端通过表单直接提交，再由服务器端捕获请求来进行处理的。但是在前后端分离趋于一种流行趋势，再加上Android和iOS开发技术日渐成熟，

大部分团队都会选择在服务器端仅提供一套通用的webservice数据接口，而web页面、Android和iOS统一都通过这套数据接口来向服务器发送请求和获取数据。

在这一过程中，大部分的webservice数据接口都会采用xml数据格式或是json数据格式来进行数据请求和处理，在这种情况下，其实来自客户端的请求就可以看作是一个字符串（无论是xml还是json数据）。

此时，常规的数据提交完全不存在任何问题，但是附件上传就需要特殊处理了。（摘自：https://blog.csdn.net/freezingxu/article/details/77922367）

2、如何将图片文件转换成Base64字符串

首先在新增一个html文件，有如下标签

<h2>选择图片：</h2>

<input id="chkFile" type="file" onchange="previewFile()"><br/>

<img id="showImg" src=""  height="200" alt="图片 预览..."> <br/>

<h2>转换结果：</h2>

<textarea id="showText" style="width:400px;height:300px;"></textarea>

js脚本方法，如下

<script>

      function previewFile() {

        //获取显示图片对象

        var preview = document.getElementById("showImg");   // 通过元素节点查找： document.querySelector('img');

        //获取选中图片对象（包含文件的名称、大小、类型等，如file.size）

        var file = document.getElementById("chkFile").files[0];   //document.querySelector('input[type=file]').files[0];

        //声明js的文件流

        var reader = new FileReader();

        if(file){

            //通过文件流将文件转换成Base64字符串

            reader.readAsDataURL(file);

            //转换成功后

            reader.onloadend = function ()

            {

                //将转换结果赋值给img标签

                preview.src = reader.result;

                //输出结果

                console.log(reader.result);

                document.getElementById("showText").value = reader.result;

            }

        }

        else{

            preview.src = "";

        }

    }

</script>

3、整体demo例子

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>js如何将选中文件转换成Base64字符串</title>

</head>

<body>

<script>

      function previewFile() {

        //获取显示图片对象

        var preview = document.getElementById("showImg");   // 通过元素节点查找： document.querySelector('img');

        //获取选中图片对象（包含文件的名称、大小、类型等，如file.size）

        var file = document.getElementById("chkFile").files[0];   //document.querySelector('input[type=file]').files[0];

        //声明js的文件流

        var reader = new FileReader();

        if(file){

            //通过文件流将文件转换成Base64字符串

            reader.readAsDataURL(file);

            //转换成功后

            reader.onloadend = function ()

            {

                //将转换结果赋值给img标签

                preview.src = reader.result;

                //输出结果

                console.log(reader.result);

                document.getElementById("showText").value = reader.result;

            }

        }

        else{

            preview.src = "";

        }

    }

</script>

<h2>选择图片：</h2>

<input id="chkFile" type="file" onchange="previewFile()"><br/>

<img id="showImg" src=""  height="200" alt="图片 预览..."> <br/>

<h2>转换结果：</h2>

<textarea id="showText" style="width:400px;height:300px;"></textarea>

</body>

</html>

4、演示效果图

1）效果图1

2）效果图2

5、测试转换后字符串是否可用

在在线转换Base64的网站测试，http://imgbase64.duoshitong.com/，可在上面生成和还原

6、demo下载地址：https://pan.baidu.com/s/1FBK-yclGaSscqh_jDGvrUw

参考demo来源于：http://blog.okbase.net/jquery2000/archive/1295.html

js如何将选中图片文件转换成Base64字符串?的更多相关文章

  1. js 将图片文件转换成base64

      1.情景展示 在JavaScript中,如何使用图片文件转换成base64? 2.解决方案 /** * 网络图像文件转Base64 * @param img dom对象 */ function g ...

  2. 图片文件转换成Base64编码实现ajax提交图片

    //上传头像图片 function uploadHead(imgPath) { console.log("imgPath = " + imgPath); var image = n ...

  3. WPF中实现图片文件转换成Visual对象，Viewport3D对象转换成图片

    原文:WPF中实现图片文件转换成Visual对象,Viewport3D对象转换成图片 1.图片文件转换成Visual对象 private Visual CreateVisual(string imag ...

  4. java 图片转换成base64字符串

    import java.io.ByteArrayOutputStream; import java.io.FileInputStream;import java.io.FileOutputStream ...

  5. php 将图片文件转成base64编码的方法

    php 将图片文件转成base64编码的方法<pre><?php /** 文件转base64输出 * @param String $file 文件路径 * @return Strin ...

  6. 将input type="file" 类型的图片文件转成base64

    带有图片的form表单上传数据是很麻烦的,因为图片通常都是和文字分开上传,这是很麻烦的,所有吧图片转成base64就可以和当成文字上传了.话不多少,看代码: 首先定义一个类型为file的input标签 ...

  7. net9：图片文件转换成二进制流存入SQL数据库，以及从数据库中读取二进制流输出文件

    原文发布时间为:2008-08-10 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration ...

  8. c# 文件转换成base64

    private static void ReadFromFile() { FileStream fsForRead = new FileStream("c9a78c8a-29b0-410d- ...

  9. 将图片文件转成BASE64格式

    html5Reader (file, item) { const reader = new FileReader() reader.onload = (e) => { this.$set(ite ...

随机推荐

  1. 下载安装 Android sdk

    下载地址: https://www.androiddevtools.cn/ 选择sdk 选择版本 将解压出的整个文件夹复制或者移动到 your sdk 路径/platforms文件夹,然后打开SDK ...

  2. HP惠普笔记本安装VirtualBox后 不能选择64bit的系统

    之前在台式机上安装VirtualBox,一切OK,能够安装64位的任何版本iso包今天在hp笔记本上安装,安装VirtualBox完毕后,只能选择32位的iso版本. 而我目前只有一个linux64b ...

  3. 总要先爬出坑的JEE架构

    先来看看官网对它的定义. Java平台企业版(Java EE)是社区驱动的企业软件的标准.Java EE是使用Java Community Process开发的,其中包括来自行业专家,商业和开源组织, ...

  4. leecode第六十二题（不同路径）

    class Solution { public: int uniquePaths(int m, int n) { ||n==) ; vector<vector<int>> pa ...

  5. Flask-SQLAlchemy基本操作

    db.session.rollback() 回滚"""Role.query.get(2) get查询接收的参数为主键,如果不存在,返回空 >>> Use ...

  6. QT5 解决QSqlDatabase: QMYSQL driver not loaded 问题

    QT版本 Qt 5.12.0 MySQL版本 8.0.13 转到MySQL的安装目录 G:\mysql-8.0.13-winx64\mysql-8.0.13-winx64\lib 将安装目录下的两个文 ...

  7. [转] @JoinColumn 详解 （javax.persistence.JoinColumn）

    原文链接:@JoinColumn详解  原文标的也是转载,但是没有注明原文链接,看起来乱乱的,所以整理一下转载过来,顺便细看一下 1. 一对一 现假设有Person表和Address表,是一对一的关系 ...

  8. “安利”一个CDN服务商网站

    一.CDN简介 CDN的全称是Content Delivery Network,即内容分发网络.CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡.内容分发.调度 ...

  9. java中的Sort函数，你值得看

    基于C语言中的sort如此这么方便,自然而然,java中也有类似C的sort函数. 1.普通数组:Arrays.sort(数组名,开始位置,结束位置). 2.类中属性排序: 模板: class A { ...

  10. CSS之透视perspective属性

    透视原理: 近大远小 . 浏览器透视:把近大远小的所有图像,透视在屏幕上. 书写方式不同的定义 perspective有两种定义方式,如下 .class{ perspective: 800px; } ...