使用data:uri上传图片
上传图片的方式有两种,一种是使用传统的html控件的方式,设置form属性为multipart/form-data。这种方式兼容ie6,ie7。另一种方式是使用data:uri,将base64编码从浏览器端post到服务器端,然后利用Base64解码即可。这种方式只是用与比较modern的浏览器,比如ie9,chrome,firefox,safari。本文主要讲讲我们如何利用data:uri的方式上传图片的。
Data URI 格式
data URI的格式非常简单,具体可以看RFC2397,data URI基本的格式如下:
data:[<mime type>][;charset=<charset>][;base64],<encoded data>
在这个格式中,
data:
是URI的协议头,表明其资源是一个data URI。第二部分,MIME type,表示数据呈现的格式,对于PNG的图片,其格式是:image/png,如果没有指定,默认的格式是:text/plain。这个character set(字符集)大多数被忽略,如果指定是的数据格式是图片时,字符集将不再使用;下一部分,将表明其数据的编码方式,我们可以不必使用base64编码格式,如果那样,我们将使用标准的URL编码方式(形如%XX%XX%XX的格式);这个encoded data部分,可能包含空格,但是无关紧要。
Base 64编码
base64是一种编码方式,将数据变成位流(bit stream),然后将其映射到base64的集合内。base64包含A-Z,a-z,自然数以及+,/符号。等号=表明我们需要进行位填充(padding)。
处理代码:
import java.io.FileOutputStream;
import java.io.OutputStream;
import sun.misc.BASE64Decoder; /**
* to convert base64 string to a image
* here we use it to handle data:uri
*
*/
public class Base64StringToImage{
public boolean generateImage(String imageStr, String imageFilePath){
if(imageStr == null){
return false;
}
BASE64Decoder decoder = new BASE64Decoder();
try {
// Base64 decode
byte[] bytes = decoder.decodeBuffer(imageStr);
for (int i = 0; i < bytes.length; ++i) {
if (bytes[i] < 0) {
bytes[i] += 256;
}
}
// generate image
OutputStream out = new FileOutputStream(imageFilePath);
out.write(bytes);
out.flush();
out.close();
return true;
} catch (Exception e) {
return false;
}
}
}
使用data:uri上传方式很简单吧。。
使用data:uri上传图片的更多相关文章
- 细说 Data URI
Data URL 早在 1995 年就被提出,那个时候有很多个版本的 Data URL Schema 定义陆续出现在 VRML 之中,随后不久,其中的一个版本被提上了议案——将它做个一个嵌入式的资源放 ...
- JS魔法堂:Data URI Scheme介绍
一.前言 上周五公司内部的Any Topic Conf.上我和同事们分享了这个主题,有同事说这个有用,有同事说这个没啥用,后来还延伸到网站性能的话题上,大家讨论的激烈程度让我觉得这次选题还不错.本篇先 ...
- Data URI 应用场景小结
Data URI scheme 在前端开发中是个常用的技术,通常会在 CSS 设置背景图中用到.比如在 Google 的首页就有用到: Data URI scheme 简称 Data URI,经常会被 ...
- php://input,php://filter,data URI schema的那些事
一.php://input一句话木马 在调研dedecms的历史漏洞时,发现了dedecms安装文件曾经出过被植入后门的漏洞(SSV-ID站点include目录下shopcar.class.php文件 ...
- data URI
参考资料:http://www.cnblogs.com/hustskyking/p/data-uri.html 与http,ftp等协议类似,data URL也是一种协议,不同的是它直接将数据(编码或 ...
- 网页优化URI(http URI scheme与data URI scheme)
网页优化的一大首要任务是减少HTTP 请求 (http request) 的次数,例如通过合并多个JS文件,合并CSS样式文件.除此之外,还有一个data URL 的密技,让我们直接把图像的内容崁入网 ...
- data URI scheme
优化网页效能,首要的任务是尽量减少HTTP请求(http request)的次数,例如把多个JavaScript文档合并,多个CSS文件合并等等.此外,还有有一种 data URL 的方法,可以直接把 ...
- 浅谈 Data URI 与 BASE 64 编码
前言(废话):鼓捣 Stylish 的时候发现了这么个奇怪的代码行: Data:image/gif;BASE64,R0lGODlhEAAQAKEAAEKF9NPi/AAAAAAAACH5BAEAAAI ...
- 前端性能优化:使用Data URI代替图片SRC
日期:2013-7-6 来源:GBin1.com 提升页面大小的效率,不仅仅是取决于使用精灵或是压缩代码,给定页面的请求数量在前端性能中也占有了很不小的重量.减少请求可以让你的网站加载更快,而其中一 ...
随机推荐
- Nextcloud13私有云盘安装指南
一.环境说明: ※操作系统版本CentOS 7.5 Minimal-1804 ※操作系统版本已经使用163 YUM源 ※ Nextcloud版本 13.05 ※ 数据库使用MariaDB,安装在同一台 ...
- SpringMVC 之 @ResponseBody 和 @RequestBody
前后端进行数据交互的时候,规定数据交互的格式,使数据交互规范而统一,是极为重要的事.一般而言,我们会采用 JSON 进行数据交互.本文暂不讨论如何 JSON 的格式规范,而是解析一下如何在 Sprin ...
- Individual Project - Word frequency program by HJB
using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Text;us ...
- Daily Scrum 10.20
今天进行了团队第一次scrum meeting,在这次会议中,我们针对NABC模型以及开发前期的工作进行了探讨. 第一次会议 主要内容如下: 为了大家接下来几周的开发效率,需要共同商量团队的一些规则 ...
- WPF使用路径(URI)引用资源文件
Uri uri = new Uri("pack://application:,,,/程序集名称;component/Resources/bj.png", UriKind.Absol ...
- OneZero团队Beta发布剧透
统计界面暂不透露,尽请期待.
- Fitts’ Law / 菲茨定律(费茨法则)
Fitts’ Law / 菲茨定律(费茨法则) 补充一张雅虎ued绘制的关于Fitts’ Law的Q版小漫画,先初步了解下: Fitts’ Law / 菲茨定律(费茨法则) Fitts’ Law ...
- Docker一些常用命令
1.启动Docker服务 service docker start 2.查看所有镜像 docker images 3.查看正在运行的容器 docker ps 4.查看所有容器 docker ps -a ...
- Django_ KindEditor 插件使用
KindEditor 富文本编辑器插件 目的及原理: 更便捷的在前端页面上实现用户的文本编辑操作, 本质上就是对标签的样式进行封装和事件预处理, 常规操作都可以通过直接的引入即可实现, 但是对于存在 ...
- 「NOI2018」你的名字
「NOI2018」你的名字 题目描述 小A 被选为了\(ION2018\) 的出题人,他精心准备了一道质量十分高的题目,且已经 把除了题目命名以外的工作都做好了. 由于\(ION\) 已经举办了很多届 ...