介绍三种上传方式：

文件上传一：伪刷新上传

文件上传二：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. 微信群打卡机器人XiaoV项目开源 | 蔡培培的独立博客

    原文首发于蔡培培的独立博客.原文链接<微信群打卡机器人XiaoV项目开源>. 5月21日,在米花(后面" 亚里士多德式友谊"专题会提及)的影响下,决定搞个私人运动群,拉 ...

  2. 使用 Visual Studio Code 进行远程开发

    使用 Visual Studio Code 进行远程开发 在完成了 AT 指令入门的学习之后,接下来就要使用 AT 指令进行 Socket 通信了.问题在于,之前 .NET 的 Socket 编程只需 ...

  3. VRChat模型制作及上传总篇(201912)

    1.视频资源及软件插件模型资源: Kodoku-shi :https://www.bilibili.com/video/av20097333(自己目前找到讲的最详细的教程,但是blender减免部分貌 ...

  4. [梁山好汉说IT] 梁山好汉和抢劫银行

    [梁山好汉说IT] 梁山好汉和抢劫银行 0x00 摘要 今天看了一篇文章<史上最有学问的银行劫匪,教你如何把握人生重大机会>.先摘录精华如下,然后看看梁山好汉在类似情况下如何处理 (东京汴 ...

  5. 在加权无向图上求出一条从1号结点到N号结点的路径，使路径上第K+1大的边权尽量小

    二分+最短路算法 #include<cstdio> #include<iostream> #include<cstring> #include<algorit ...

  6. Java提供的JDBC标准- 六大步骤

    JDBC 1.//加载驱动 class.forname 2.//创建连接connection 3.//创建 管道流 statement或  preparestatement预处理4.//执行sql语句 ...

  7. 洛谷$P2570\ [ZJOI2010]$贪吃的老鼠 网络流+二分

    正解:网络流+二分 解题报告: 传送门$QwQ$ 和上一题有点儿像,,,?$QwQ$但是比上一题要有趣很多$QwQ$ 首先把大致思路捋下?依然是.二分出每个奶酪的开始和结束时间,然后check下最大流 ...

  8. Windows To Go 企业版2019 LTSC 开发环境部署

    Windows To Go 是一项非常实用的功能,与传统方式安装Windows 10相比更具有灵活性,会根据每次接入的硬件型号保留不同版本驱动. 由于博主是一名全栈程序员(截至发稿处于菜鸟级别),对灵 ...

  9. 「分块系列」「洛谷P4168 [Violet]」蒲公英 解题报告

    蒲公英 Description 我们把所有的蒲公英看成一个长度为\(n\)的序列(\(a_1,a_2,...a_n\)),其中\(a_i\)为一个正整数,表示第i棵蒲公英的种类的编号. 每次询问一个区 ...

  10. 「CF670C」Cinema 解题报告

    题面 传送门 思路: 离散化.hash 对于这样一个明显的统计排序的题目,当然轻而易举啦~ 但是!看!语言的编号 a数组和 b数组的值最大在\(10^9\)的级别,所以开个数组来存---That's ...