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
js如何将选中图片文件转换成Base64字符串?的更多相关文章
- js 将图片文件转换成base64
1.情景展示 在JavaScript中,如何使用图片文件转换成base64? 2.解决方案 /** * 网络图像文件转Base64 * @param img dom对象 */ function g ...
- 图片文件转换成Base64编码实现ajax提交图片
//上传头像图片 function uploadHead(imgPath) { console.log("imgPath = " + imgPath); var image = n ...
- WPF中实现图片文件转换成Visual对象,Viewport3D对象转换成图片
原文:WPF中实现图片文件转换成Visual对象,Viewport3D对象转换成图片 1.图片文件转换成Visual对象 private Visual CreateVisual(string imag ...
- java 图片转换成base64字符串
import java.io.ByteArrayOutputStream; import java.io.FileInputStream;import java.io.FileOutputStream ...
- php 将图片文件转成base64编码的方法
php 将图片文件转成base64编码的方法<pre><?php /** 文件转base64输出 * @param String $file 文件路径 * @return Strin ...
- 将input type="file" 类型的图片文件转成base64
带有图片的form表单上传数据是很麻烦的,因为图片通常都是和文字分开上传,这是很麻烦的,所有吧图片转成base64就可以和当成文字上传了.话不多少,看代码: 首先定义一个类型为file的input标签 ...
- net9:图片文件转换成二进制流存入SQL数据库,以及从数据库中读取二进制流输出文件
原文发布时间为:2008-08-10 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration ...
- c# 文件转换成base64
private static void ReadFromFile() { FileStream fsForRead = new FileStream("c9a78c8a-29b0-410d- ...
- 将图片文件转成BASE64格式
html5Reader (file, item) { const reader = new FileReader() reader.onload = (e) => { this.$set(ite ...
随机推荐
- MD5加密与Hash加密
一.Md5加密 MD5算法具有以下特点: 1.压缩性:任意长度的数据,算出的MD5值长度都是固定的. 2.容易计算:从原数据计算出MD5值很容易. 3.抗修改性:对原数据进行任何改动,哪怕只修改1个字 ...
- netstat 在windows下和Linux下查看网络连接和端口占用
假设忽然起个服务,告诉我8080端口被占用了,OK,我要去看一下是什么服务正在占用着,能不能杀 先假设我是在Windows下: 第一列: Proto 协议 第二列: 本地地址[ip+端口] 第三列:远 ...
- oracle中索引的使用
声明:以下内容是自己跟着教学视屏学习之后整理而来(主要是自用),如有侵权请告知,将尽快删除. 一.索引 1. 概述:数据库对象之一索引用于提高查询效率索引的内建工作对用户是透明的,由数据库自行维护,我 ...
- Arrays常用方法
传送:https://blog.csdn.net/u013256816/article/details/50924762
- 全排列问题(c语言实现)
问题描述: 假设有数组里面存放26个字母,取出n个,以m个排列,计算排列的总数! 注意: (1) m<n (2) 里面的元素不能重复排列 (3)"遇零则止" 核心代码如下: ...
- lua --- 局部变量
1.block(代码块) --- 一个控制结构.一个函数体.一个chunk chunck --- 变量被声明的那个文件或者文本串 2.局部变量只在声明的那个block中有效 3.可以使用 do . ...
- pdf can't copy text 无法复制文字
有些 pdf 是通过图片弄出来的,或者被 protect 了. 我们会无法 copy 里面的字. 这个时候可以用 OCR (Optical character recognition) 就是从图片中识 ...
- C#打印格式
一:C#代码直接打印pdf文件(打印质保书pdf文件) 引用: 代码注释很详细了. private void btn_pdf_Click(object sender, RoutedEventArgs ...
- 雷林鹏分享:C# 判断
C# 判断 判断结构要求程序员指定一个或多个要评估或测试的条件,以及条件为真时要执行的语句(必需的)和条件为假时要执行的语句(可选的). 下面是大多数编程语言中典型的判断结构的一般形式: 判断语句 C ...
- English trip V1 - B 18. Workplaces 工作地方 Teacher:Russell Key: do / does
In this lesson you will learn to talk about workplaces. 课上内容(Lesson) My English Teacher name is Russ ...