针对于一些小的数据,可以在网页中直接嵌入,而不是从外部文件载入,比如图片。这样的好处是可以减少一次http的请求,缺点是使得页面内容变大。data类型的url格式在98年就已经提出了,现在绝大部分的浏览器都能支持,比如使用IE6内核的国内浏览器,chrome和firefox等,但IE8上使用有问题,图片显示不完整。
data类型的url有以下几种形式:
data:,<文本数据>
data:text/plain,<文本数据>
data:text/html,<HTML代码>
data:text/html;base64,<base64编码的HTML代码>
data:text/css,<CSS代码>
data:text/css;base64,<base64编码的CSS代码>
data:text/javascript,<Javascript代码>
data:text/javascript;base64,<base64编码的Javascript代码>
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
data类型的图片格式为:
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAg...省略N个字节"/>
以图片为例,生成此数据的伪代码为:
// 定义存放图片字节
data[]
// 打开图片,内容放入data中
open(file_url, data)
// 分析图片信息
info = image_info(data)
// 图片类型
media_type = info.media_type
// 对图片内容进行base64编码
enc = base64(data)
// 最后按照格式拼接字符串
data_url = "data:" + media_type + ";base64," + enc
生成此数据的工具,你可以访问此网页试试
http://dataurl.net/#dataurlmaker
参考:
http://hi.baidu.com/fegro/blog/item/c5492a0a0cb562bd2fddd45b.html
http://www.iteye.com/topic/1117213
分享到:
相关推荐
数据类型URL(Data URL Scheme)是一种在Web开发中用于嵌入小型数据块到HTML文档或CSS样式表中的方法。这种格式最初在1998年的RFC2397中被定义,目的是为了允许开发者直接在页面内包含小量的数据,而无需从外部文件...
例如,将一张图片转换为Data URL,可以直接嵌入到HTML的`<img>`标签中,而无需通过HTTP请求获取。 2. **数据URL解析**:库提供了解析Data URL的能力,将Data URL分解为它的组成部分,如媒体类型(MIME type)、编码...
- 使用`encodeURIComponent`对`status`值进行编码,防止URL中的特殊字符引起问题。 - 最后调用`form2.submit()`提交表单。 #### 总结 本示例展示了一个典型的文件上传表单及其提交逻辑。需要注意的是,当没有选择...
在JavaScript中,我们可以使用Blob对象和URL.createObjectURL方法将SVG转换为dataURI,这对于动态生成SVG或在运行时修改SVG非常有用。以下是一个简单的示例: ```javascript let svgString = '...
在这个代码片段中,我们首先创建了一个URL对象,然后使用URLSession的shared实例创建了一个dataTask。这个task会在后台线程中执行,不会阻塞用户界面。当请求完成时,会回调闭包,其中包含数据、响应对象和可能的...
1. **dataURL**: dataURL由三部分组成:`data:`前缀、媒体类型(如image/jpeg)、逗号分隔后的内容编码。内容通常是Base64编码的图像二进制数据。dataURL可以避免网络延迟,使图像在页面加载时无需额外请求。 2. **...
然而,需要注意的是,Data URI适合较小的文件,因为过大的文件可能会导致浏览器性能问题或达到URL长度限制。 #### 总结 Data URI提供了一种简单有效的方式来嵌入小文件到HTML或CSS中,有助于优化网站性能。通过...
- **xmlData**: XML数据,通过URL附加参数的方式发起请求。 - **disableCaching**: 布尔值,指示是否禁用缓存。 ##### 其他功能 除了发送请求之外,**Ext.data.Connection** 还提供了其他一些实用的方法,如: - ...
- **url** (字符串类型):表示要访问的目标URL地址。 - **pars** (字符串类型):如果请求方式为POST,则此参数表示要发送的数据(通常为JSON格式);如果请求方式为GET,则此参数会被添加到URL后面作为查询字符串的...
1. **HTML表单与文件上传**:在HTML中,要上传文件,表单的`enctype`属性必须设置为`multipart/form-data`。这样做的原因是,普通表单数据(如文本字段)是以URL编码的方式发送的,但文件数据需要更复杂的编码方式以...
因此,我们需要识别这些异步请求的URL和参数,通常可以通过浏览器的开发者工具中的网络面板查看。 3. **JSON解析**:许多动态加载的数据是以JSON格式返回的。JSON是一种轻量级的数据交换格式,易于人阅读和编写,...
3. **创建Repository**:定义一个接口继承自Spring Data JPA提供的`JpaRepository`,并指定对应的实体类和主键类型。这样,Spring Data JPA会自动生成CRUD方法。 4. **配置FreeMarker**:在Spring Boot配置类中,...
在这个场景中,我们有两个与HTTP相关的函数,用于在MFC(Microsoft Foundation Classes)环境中执行HTTP请求:`HTTP_POST_DATA` 和 `HTTP_GET_DATA`。 `HTTP_POST_DATA` 函数用于执行POST请求,这是一种HTTP方法,...
这里的`data`属性相当于`<iframe>`的`src`,指定要加载的HTML文件,而`type`属性则指定了数据类型。 另外,如果你希望实现的是页面之间的导航而不是直接嵌入,可以使用`<a>`标签的`href`属性链接到其他HTML文件。...
// 解析data URL,获取目录内容 // ... }; } ``` 4. 读取HTML内容:`readFileContent`函数会使用FileReader的`readAsText`方法读取HTML文件的内容。 ```javascript function readFileContent(file) { const ...
前端接收到图片的二进制数据后,可以通过`Blob`和`URL.createObjectURL()`将数据转化为URL,然后在HTML中设置`<img>`标签的`src`属性。例如: ```javascript let imgBlob = new Blob([response.data], {type: '...
在IT行业中,我们经常需要处理各种网络资源,其中包括从URL中获取文件路径并展示特定类型的文档,例如SWF(Shockwave Flash)文件。SWF是一种用于在网络上传输多媒体内容的格式,常见于早期的网页动画和游戏。这篇...
在Vue3中实现各种类型文件的预览功能是一项常见的需求,尤其在开发Web应用时,用户可能需要在不离开页面的情况下查看不同类型的文件。本文将详细介绍如何在Vue3项目中预览Office文档、PDF、图片、视频和音频文件。 ...
标题中的“oec-data-url-enumerate”是一个脚本或工具,主要用于从经济合作与发展组织(OECD,Organisation for Economic Co-operation and Development)的网站上检索数据URL。这个工具的作用是帮助用户批量获取...