js如何将选中图片文件转换成Base64字符串?

如何将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

原文地址:https://www.cnblogs.com/xielong/p/9643276.html

时间: 2024-10-24 21:51:56

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

js 将图片文件转换成base64

1.情景展示 在JavaScript中,如何使用图片文件转换成base64? 2.解决方案 /** * 网络图像文件转Base64 * @param img dom对象 */ function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getConte

将input type=&quot;file&quot; 类型的图片文件转成base64

带有图片的form表单上传数据是很麻烦的,因为图片通常都是和文字分开上传,这是很麻烦的,所有吧图片转成base64就可以和当成文字上传了.话不多少,看代码: 首先定义一个类型为file的input标签还要定义一个onchange事件,并传入一个event参数. <div> <input type="file" id="imgTest" type="file" onchange="imgChange(event)&quo

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

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

html5将图片转换成base64的实例代码

这篇文章给大家介绍了如何利用html5将图片转换成base64,文中通过示例代码介绍的很详细,有需要的朋友们可以参考借鉴. base64编码介绍base64是一种网络上常用的8bit字节代码的编码方式,base64可以用于http环境下传递较长的标识信息,同时可以放在url当中使用,因为base64不惧可读性,所以具有一定的加密功能. 为什么要把图片转换成base64编码?将图片转换成base64代码可以减少http请求,因为图片可以以字符编码的形式直接传递到客户端,而文件形式都需要进行http

delphi将图片转换成Base64编码函数

{************************************************************************** 名称: BaseImage 参数: fn: TFilename 返回值: string 功能: 将fn文件转换成Base64编码,返回值为编码 **************************************************************************} function BaseImage(fn: str

怎样将PDF文件转换成jpg图片的方法

有些情况下需要将文档内容转为图片进行保存.与PDF文件一样,jpg格式的图片是一种与平台无关的通用的图片格式.适合用来传输和存储.所以一般将PDF转换成的图片都是jpg格式的. 虽然一般截图也是jpg格式的,但是通过截图的方式来将PDF文档的页面一个个转换成图片是需要用更多的时间的,而且图片质量难以保证.页面较大的文档截取的图片可能会使图片内容不清晰. 通过pdf转换成jpg软件来将文件转换成图片也是一种较好的方法.转换的图片与原文档的页面大小相同,并且输出的图片是jpg格式的. 用转换工具转换

将pdf文件转换成jpg图片

平时办公中经常会用PDF格式传递一些文档资料,PDF格式虽然可以在很多平台中打开,但是也是需要安装对应的阅读工具,而有些时候文档信息是需要用图片的方式进行发送的,那么如果要把PDF文件转换成图片的该怎么操作呢? 处理PDF文件的格式转换一般都是用PDF转换工具来操作的,转换成图片也是可以的.用转换工具将PDF文件转换成的图片是jpg格式,图片的的大小和PDF文件的每个页面大小是等比例的. 打开转换工具后在PDF转换成其他文件选项中选择文件转图片.接着将要转换成图片的文件添加到转换器中,对于加密文

如何将dwg文件转换成黑白jpg图片

在CAD日常的工作中,我们经常见到的就是dwg格式的文件,但是dwg格式的文件不方便我们进行查看CAD图纸,所以有时候需要将dwg格式的文件转换成jpg格式的,如果我们想要将dwg文件转换成黑白jpg图片,具体应该怎么进行转换?如何将dwg转换成黑白jpg图片?下面小编就教教大家在迅捷CAD编辑器标准版中如何将dwg文件转换成黑白jpg图片. 第一步:在浏览器中搜索CAD编辑器,进入迅捷官网,点击下载安装,然后双击打开CAD编辑器,进入到软件的操作界面. 第二步:软件打开之后,点击编辑器界面上方

如何将CAD图纸文件转换成黑白的图片?

如何将CAD图纸转换成黑白的图片?在日常的工作中,特别是在CAD行业,每天在日常不过的事情就是绘制图纸,但是在绘制CAD图纸的时候建筑设计师们都是根据客户的需求来进行绘制的,所以在每编辑完一张CAD图纸都需要交给客户进行查看,如果在给客户的时候,如何将CAD图纸文件转换成黑白的图片?巨涛要怎么来进行操作?有什么好的办法吗?下面小编就来教教大家在迅捷CAD编辑器中如何将CAD图纸文件转换成黑白的图片?想要了解的朋友就一起来看看吧. 使用步骤一:首先打开电脑,在电脑桌面上任意的打开一个浏览器,在浏览