文件上传三：base64编码上传
介绍三种上传方式：
优点：
1.浏览器可以马上展示图像，不需要先上传到服务端，减少服务端的垃圾图像
2.前端可以压缩、处理后上传到服务端，减少传输过程中的等待时间和服务器压力
缺点：
1.生成编码后保存成图片，倘若不做处理，会比原来的图片容量大，具体原因，搜索关键词：Base64编码为什么会使数据量变大
2.图片越大生成的编码越多，编码越多开发者工具中查看它时卡顿越久，谷歌浏览器好点，360极速直接假死。也就是说会影响前端调试。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
td {
padding: 10px;
}
</style>
</head>
<body> <table>
<tr>
<td>选择图片：</td>
<td><input type="file" id="file1" /></td>
</tr>
<tr>
<td>原图预览：</td>
<td id="ytyl"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="压缩" id="btnYaSuo" /></td>
</tr>
<tr>
<td>压缩预览：</td>
<td id="ysyl"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="上传" id="btnUpload" /></td>
</tr>
</table> <canvas id="myCanvas" style="display:none">
Your browser does not support the HTML5 canvas tag.
</canvas> <script> file1.onchange = function () {
if (file1.files.length < 1 || !/image\/\w+/.test(file1.files[0].type)) {
//判断格式正则：/image\/png/，/image\/jpeg/，/image\/gif/
alert("请确保文件为图像类型");
return;
}
var reader = new FileReader();
reader.readAsDataURL(file1.files[0]);
reader.onload = function (e) {
var result = e.target.result;
if (result && result.length > 0) {
ytyl.innerHTML = '<img src="' + result + '" id="img1" />';
}
};
}; btnYaSuo.onclick = function () {
var imgobj = document.getElementById("img1");
var canvas = document.getElementById("myCanvas");
canvas.width = imgobj.width;
canvas.height = imgobj.height;
var context = canvas.getContext("2d");
context.drawImage(imgobj, 0, 0, canvas.width, canvas.height);
//取值：image/jpeg、image/png（默认值）
var dataUrl = canvas.toDataURL("image/jpeg", 0.9);
ysyl.innerHTML = '<img src="' + dataUrl + '" id="img2" />';
}; btnUpload.onclick = function () {
//var imgobj = document.getElementById("img1"); //未压缩的图像
var imgobj = document.getElementById("img2");
if (!imgobj) {
return;
}
//做为普通的字符串POST到服务端
var data = { "FileData": imgobj.getAttribute("src") };
//$.post("Handler1.ashx", data, function (res) { }, "json");
}; </script> </body>
</html>
Handler1.ashx的处理：
public void ProcessRequest(HttpContext context)
{
string base64Code = context.Request.Form["FileData"];
if (string.IsNullOrEmpty(base64Code))
{
context.Response.Write("{\"Msg\":\"请上传文件！\"}");
context.Response.End();
} string ext = string.Empty;
if (base64Code.Contains("data:image/jpeg;base64,"))
{
ext = ".jpg";
base64Code = base64Code.Substring();
}
else if (base64Code.Contains("data:image/png;base64,"))
{
ext = ".png";
base64Code = base64Code.Substring();
}
else
{
context.Response.Write("{\"Msg\":\"文件格式只支持JPG、PNG！\"}");
context.Response.End();
} DateTime now = DateTime.Now;
string fileName = Guid.NewGuid().ToString() + ext;
string relPath = string.Format("/Upload/{0}{1}{2}/", now.Year.ToString(), now.Month.ToString(), now.Day.ToString());
string absPath = HttpContext.Current.Request.MapPath("~" + relPath);
if (!Directory.Exists(absPath))
{
Directory.CreateDirectory(absPath);
}
byte[] arr = Convert.FromBase64String(base64Code);
MemoryStream ms = new MemoryStream(arr);
new Bitmap(ms).Save(absPath + fileName); context.Response.Write("{\"Msg\":\"上传成功！\",\"Path\":\"" + relPath + fileName + "\"}");
context.Response.End();
}
文件上传三：base64编码上传的更多相关文章
- JS中使用base64编码上传下载文件
下载文件:使用FileSaver.js https://github.com/eligrey/FileSaver.js/blob/master/README.md 手机端UC浏览器无法下载 安卓 ...
- 文件上传 和 base64编码
base64编码 1.关于Base64编码 : https://www.cnblogs.com/liyiwen/p/3814968.html (个人猜测),file表单发送文件,肯定是将文件转换为 ...
- HTML5 JS 压缩图片,并取得图片的BASE64编码上传
基本过程 1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 Image对象. 2) 在image对象的 ...
- 读取一个文件，将其Base64编码，每76个字符加一个换行(转)
echo chunk_split(base64_encode(file_get_contents('base64.txt'))); 例子 1 本例分隔每个字符,并添加 ".": & ...
- 文件上传二：FormData上传
介绍三种上传方式: 文件上传一:伪刷新上传 文件上传二:FormData上传 文件上传三:base64编码上传 Flash的方式也玩过,现在不推荐用了. 真正的异步上传,FormData的更多操作,请 ...
- 小谢第7问：js前端如何实现大文件分片上传、上传进度、终止上传以及删除服务器文件？
文件上传一般有两种方式:文件流上传和base64方式上传,毫无疑问,当进行大文件上传时候,转为base64是不现实的,因此用formData方式结合文件流,直接上传到服务器 本文主要结合vue的来讲解 ...
- Base64编码知识详解
在我们进行前端开发时,针对项目优化,常会提到一条:针对较小图片,合理使用Base64字符串替换内嵌,可以减少页面http请求. 并且还会特别强调下,必须是小图片,大小不要超过多少KB,等等. 那么,B ...
- java处理图片base64编码的相互转换
转载自http://www.cnblogs.com/libra0920/p/5754356.html 直接上代码 import sun.misc.BASE64Decoder; import sun.m ...
- Java对网络图片/本地图片转换成Base64编码和解码
一.将本地图片转换成Base64编码字符串 /** * 将本地图片转换成Base64编码字符串 * * @param imgFile 图片目录路径 * @return */ public static ...
随机推荐
- A non well formed numeric value encountered
在从数据库获取时间戳数据的时候返回的结果是varchar类型 然后在用date("Y-m-d H:i:s", 时间戳)的时候会报错A non well formed numeric ...
- 聚类分析 一、k-means
前言 人们常说"物以类聚,人以群分",在生物学中也对生物从界门纲目科属种中进行了划分.在统计学中,也有聚类分析法,通过把相似的对象通过静态分类的方法分成不同的组别或者更多的子集,从 ...
- 深入学习CSS中如何使用定位
CSS中定位介绍 position属性在英文单词中表示位置的意思,在CSS中主要作用设置元素的定位. CSS中一共有3种定位如下: 属性值 描述 fixed 设置固定定位. relative 设置相对 ...
- 抽象类（abstract class）和接口（interface）有什么区别?
抽象类中可以有构造器.抽象方法.具体方法.静态方法.各种成员变量,有抽象方法的类一定要被声明为抽象类,而抽象类不一定要有抽象方法,一个类只能继承一个抽象类. 接口中不能有构造器.只能有public修饰 ...
- 【题解】BZOJ5093图的价值(二项式+NTT)
[题解]BZOJ5093图的价值(二项式+NTT) 今天才做这道题,是我太弱了 强烈吐槽c++这种垃圾语言tmd数组越界不re反倒去别的数组里搞事情我只想说QAQ 推了一张A4纸的式子 考虑每个点的度 ...
- Python+appium+unittest UI自动化测试
什么是UI自动化 自动化分层 单元自动化测试,指对软件中最小可测试单元进行检查和验证,一般需要借助单元测试框架,如java的JUnit,python的unittest等 接口自动化测试,主要检查验证模 ...
- 非常完整的线性DP及记忆化搜索讲义
基础概念 我们之前的课程当中接触了最基础的动态规划. 动态规划最重要的就是找到一个状态和状态转移方程. 除此之外,动态规划问题分析中还有一些重要性质,如:重叠子问题.最优子结构.无后效性等. 最优子结 ...
- 阿里云ECS单节点Kubernetes部署
参考资料: kubernetes官网英文版 kubernetes官网中文版 环境.工具 阿里云学生机ECS.Ubuntu.docker.kubectl1.15.4.kubelet1.15.4.kube ...
- 如何验证docker-compose安装成功
安装过程及如何验证docker-compose安装成功 步骤1: 通过运行 curl 从GitHub上进行安装下载 sudo curl -L "https://github.com/dock ...
- Python3-Selenium自动化测试框架（二）之selenium使用和元素定位
Selenium自动化测试框架(二)之selenium使用和元素定位 (一)selenium的简单使用 1.导包 from selenium import webdriver 2.初始化浏览器 # 驱 ...