介绍三种上传方式:

文件上传一:伪刷新上传

文件上传二:FormData上传

文件上传三: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编码上传的更多相关文章

  1. JS中使用base64编码上传下载文件

    下载文件:使用FileSaver.js   https://github.com/eligrey/FileSaver.js/blob/master/README.md 手机端UC浏览器无法下载  安卓 ...

  2. 文件上传 和 base64编码

    base64编码 1.关于Base64编码  :  https://www.cnblogs.com/liyiwen/p/3814968.html (个人猜测),file表单发送文件,肯定是将文件转换为 ...

  3. HTML5 JS 压缩图片,并取得图片的BASE64编码上传

    基本过程 1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 Image对象. 2) 在image对象的 ...

  4. 读取一个文件,将其Base64编码,每76个字符加一个换行(转)

    echo chunk_split(base64_encode(file_get_contents('base64.txt'))); 例子 1 本例分隔每个字符,并添加 ".": & ...

  5. 文件上传二:FormData上传

    介绍三种上传方式: 文件上传一:伪刷新上传 文件上传二:FormData上传 文件上传三:base64编码上传 Flash的方式也玩过,现在不推荐用了. 真正的异步上传,FormData的更多操作,请 ...

  6. 小谢第7问:js前端如何实现大文件分片上传、上传进度、终止上传以及删除服务器文件?

    文件上传一般有两种方式:文件流上传和base64方式上传,毫无疑问,当进行大文件上传时候,转为base64是不现实的,因此用formData方式结合文件流,直接上传到服务器 本文主要结合vue的来讲解 ...

  7. Base64编码知识详解

    在我们进行前端开发时,针对项目优化,常会提到一条:针对较小图片,合理使用Base64字符串替换内嵌,可以减少页面http请求. 并且还会特别强调下,必须是小图片,大小不要超过多少KB,等等. 那么,B ...

  8. java处理图片base64编码的相互转换

    转载自http://www.cnblogs.com/libra0920/p/5754356.html 直接上代码 import sun.misc.BASE64Decoder; import sun.m ...

  9. Java对网络图片/本地图片转换成Base64编码和解码

    一.将本地图片转换成Base64编码字符串 /** * 将本地图片转换成Base64编码字符串 * * @param imgFile 图片目录路径 * @return */ public static ...

随机推荐

  1. jquery中报错Uncaught ReferenceError: $ is not defined的解决办法

    jquery中报错提示为:Uncaught ReferenceError: $ is not defined 这个错误的原因就是你没有引入jquery库文件或者引入的路径不对造成的

  2. SofaBoot使用Nacos进行服务注册发现

    前提 最近创业公司的项目组基于业务需要,开发一套新的微服务,考虑到选用的组件必须是主流.社区活跃.生态完善以及方便迁移到云上等因素,引入了SOFAStack全家桶.微服务开发里面,一个很重要的功能就是 ...

  3. centos利用OneinStack搭建环境

    介绍 OneinStack支持以下数种环境组合: LNMP(Linux + Nginx+ MySQL+ PHP) LAMP(Linux + Apache+ MySQL+ PHP) LNMPA(Linu ...

  4. 1088 三人行 (20分)C语言

    子曰:"三人行,必有我师焉.择其善者而从之,其不善者而改之." 本题给定甲.乙.丙三个人的能力值关系为:甲的能力值确定是 2 位正整数:把甲的能力值的 2 个数字调换位置就是乙的能 ...

  5. C#操作注册表(简单方便,兼容X32和X64)

    C#操作注册表(简单方便,兼容X32和X64) 大家好,我在这里给大家介绍本人实现的操作注册表的类,简单方便,兼容32位系统和64位系统. 一般大家用C#操作注册的方法是使用命名空间Microsoft ...

  6. 配置ca服务器和http,mail加密

    一·CA介绍 certificate authority   数字证书授权中心 被通信双方信任的.独立的第三方机构 负责证书颁发.验证.撤销等管理 数字证书 经证书授权中心数字签名的包含公开密钥拥有者 ...

  7. docker仓库和dockerfile

    通过Dockerfile创建镜像 Dockerfile •  Dockerfile语法格式 –  FROM:基础镜像 –  MAINTAINER:镜像创建者信息 –  COPY:复制文件到镜像(所有文 ...

  8. spring boot集成spring-boot-starter-mail邮件功能

    前情提要 以目前IT系统功能来看,邮件功能是非常重要的一个功能.例如:找回密码.邮箱验证,邮件动态码.忘记密码,邮件营销等,都需要用到邮件功能.结合当下最流行的spring boot微服务,推出了sp ...

  9. Atom + Texlive 配置 Latex 环境

    Atom + Texlive 配置 Latex 环境 步骤1: 安装TexliveTexlive点击 "Download" 下载,然后安装,等待安装完成即可 步骤2: 安装Atom ...

  10. web三要素

    1.带动web的三驾马车 html5,css,javascript(js)就是带动web的三架马车,html是web的结构,css是web的样式,而js则是web的行为(即与用户的交互) 如果把htm ...