html5中将图片的绝对路径转换成文件对象
html5中将图片的绝对路径转换成文件对象
将图片的绝对路径转换成base64编码，请看这篇文章
我们先来理解基本知识点：
1. 理解HTML5中的FileList对象与file对象。
在HTML5中，FileList对象表示用户选择的文件列表。通过添加multipe属性，file控件内允许一次选择多个文件。控件内的每一个用户选择的文件都是一个
file对象，而FileList对象则是file对象的列表。代表用户选择的所有文件。我们先来看一个简单的demo，看下file文件对象有哪些属性。如下代码：
<!DOCTYPE html>
<html>
<head>
<title>filesystem:URL</title>
</head>
<body>
<div>
<label>选择：</label>
<input type='file' multiple id="file" />
<input type="button" value="文件上传" onClick="showFile()" />
</div>
<script>
function showFile() {
var files = document.getElementById('file').files; // 返回所有被选择的文件
for (var i = 0, ilen = files.length; i < ilen; i++) {
// 打印出单个文件对象的信息
console.log(files[i]);
/*
* 打印的信息如下：
File {
lastModified: 1457946612000
lastModifiedDate: Mon Mar 14 2016 17:10:12 GMT+0800 (CST) {}
name: "test.html"
size: 796
type: "text/html"
webkitRelativePath: ""
*/
/* 如果上传的是一张图片的话，会返回如下信息的
File {
lastModified: 1466907500000
lastModifiedDate: Sun Jun 26 2016 10:18:20 GMT+0800 (CST) {}
name: "a.jpg"
size: 23684
type: "image/jpeg"
webkitRelativePath: ""
}
*/
/*
因此 如果需要判断该上传的文件是不是图像文件的话，可以根据type类型来判断如下：
var file = files[i];
if (!/image\/\w+/.test(file.type)) {
console.log('该文件不是图像文件');
} else {
console.log('该文件是图像文件');
} 但是如果只让传图片的话，可以在image控件添加一个属性 accept="image/*" 即可；我们可以如下写代码：
<input type='file' multiple accept = 'image/gif,image/jpeg,image/jpg,image/png' />
*/
}
}
</script>
</body>
</html>
2. 理解Blob对象
要点：在HTML5中，新增一个Blob对象，代表原始二进制数据，其实file对象也是继承了Blob对象。
Blob对象有两个属性，size属性表示一个Blob对象的字节长度，type属性表示Blob的MIME类型，如果是未知类型，则返回一个空字符串。
请看如下代码：
<!DOCTYPE html>
<html>
<head>
<title>filesystem:URL</title>
</head>
<body>
<div>
<label>选择文件：</label>
<input type="file" id="file" />
<input type="button" value="显示文件信息" onClick="showFileType()" />
<p>文件字节长度: <span id="size"></span></p>
<p>文件类型：<span id="type"></span></p>
</div>
<script>
function showFileType() {
var file;
// 获取用户选择的第一个文件
file = document.getElementById('file').files[0];
var size = document.getElementById('size');
var type = document.getElementById('type');
// 显示文件字节的长度
size.innerHTML = file.size;
// 显示文件的类型
type.innerHTML = file.type; // 打开控制台 查看返回的file对象
console.log(file);
}
</script> </body>
</html>
注意：Blob和File是可以同时使用的，可以使用FileReader从Blob中读取数据。
下面是一段绝对路径的图片地址转换为base64编码的图片，然后将base64编码的图片转换成blob对象。代码如下：
<!DOCTYPE html>
<html>
<head>
<title>将以base64的图片url数据转换为Blob</title>
</head>
<body>
<script>
/**
* 将以base64的图片url数据转换为Blob
* @param urlData
* 用url方式表示的base64图片数据
*/
function convertBase64UrlToBlob(base64){
var urlData = base64.dataURL;
var type = base64.type;
var bytes = window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob( [ab] , {type : type});
}
/*
* 图片的绝对路径地址 转换成base64编码 如下代码：
*/
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
var dataURL = canvas.toDataURL("image/"+ext);
return {
dataURL: dataURL,
type: "image/"+ext
};
}
var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";
var image = new Image();
image.crossOrigin = '';
image.src = img;
image.onload = function(){
var base64 = getBase64Image(image);
console.log(base64);
/*
打印信息如下：
{
dataURL: "data:image/png;base64,xxx"
type: "image/jpg"
}
*/
var img2 = convertBase64UrlToBlob(base64);
console.log(img2);
/*
打印信息如下：
Blob {size: 9585, type: "image/jpg"}
*/
}
</script>
</body>
</html>
注意：在HTML5中，新增一个Blob对象，代表原始二进制数据，其实file对象也是继承了Blob对象。因此我们可以使用图片的绝对地址转换成文件对象。
因此我们可以使用绝对地址的图片转换成file文件对象，详细的demo可以看我git上图片上传控件，该插件先是图片上传支持，然后突然发现到编辑页面的时候，需要显示默认的图片，也可以同时支持在默认显示图片的情况下继续上传新图片，或者删除所有的图片，但是开发人员给我的只有图片的绝对地址，所以就一直想通过图片的绝对地址如何转换成file对象，如果不转成file对象的话，使用这句代码的时候 var reader = new FileReader(); 会报错，因此可以使用我们上面
讲的blob对象先转换成blob对象，然后就可以使用文件操作对象 fileReader。
详细的代码，请看我git上的 图片上传控件(https://github.com/tugenhua0707/html5UploadImage)
, 效果查看 https://tugenhua0707.github.io/html5UploadImage/index.html
html5中将图片的绝对路径转换成文件对象的更多相关文章
- Java中windows路径转换成linux路径等工具类
项目中发现别人写好的操作系统相关的工具类: 我总结的类似相关博客:http://www.cnblogs.com/DreamDrive/p/4289860.html import java.net.In ...
- WPF中实现图片文件转换成Visual对象，Viewport3D对象转换成图片
原文:WPF中实现图片文件转换成Visual对象,Viewport3D对象转换成图片 1.图片文件转换成Visual对象 private Visual CreateVisual(string imag ...
- js中将json字符串转换成json对象
在我们使用js请求后台控制器传回的结果result值的时候,经常会出现返回结果值为json字符串的情况,字符串无法在js中直接使用 返回样式栗子: 这是一个json字符串:result = " ...
- JAVA将Byte数组(byte[])转换成文件
/** * 将Byte数组转换成文件 * @param bytes byte数组 * @param filePath 文件路径 如 D://test/ 最后"/"结尾 * @par ...
- 数据库表转换成javaBean对象小工具
package test.utils; import java.io.FileWriter;import java.io.IOException;import java.io.PrintWriter; ...
- 简单的反射 把datatable 转换成list对象
/// <summary> /// 把datatable 转换成list对象 /// </summary> /// <typeparam name="T&quo ...
- Java对象转换成xml对象和Java对象转换成JSON对象
1.把Java对象转换成JSON对象 apache提供的json-lib小工具,它可以方便的使用Java语言来创建JSON字符串.也可以把JavaBean转换成JSON字符串. json-lib的核心 ...
- json字符串转换成json对象，json对象转换成字符串，值转换成字符串，字符串转成值
一.json相关概念 json,全称为javascript object notation,是一种轻量级的数据交互格式.采用完全独立于语言的文本格式,是一种理想的数据交换格式. 同时,json是jav ...
- List转换成JSON对象
List转换成JSON对象 1.准备工作 导入jar包 (1)json-lib-2.3-jdk15.jar (2)commons-beanutils-1.8.0.jar (3)commons-coll ...
随机推荐
- Winform界面中实现通用工具栏按钮的事件处理
在一个给客户做的项目中,界面要求修改增加通用工具栏按钮的事件处理,也就是在主界面中放置几个固定的功能操作按钮,打开不同的页面的时候,实现对应页面的功能处理,这种和我标准的界面处理方式有所不同,标准的列 ...
- postman 时间戳和加密
在使用postman进行接口测试的时候,对于有些接口字段需要时间戳加密,这个时候我们就遇到2个问题,其一是接口中的时间戳如何得到?其二就是对于现在常用的md5加密操作如何在postman中使用代码实现 ...
- 学习MySQL（上）
具体实例 1.PHP 服务器组件 对于初学者建议使用集成的服务器组件,它已经包含了 PHP.Apache.Mysql 等服务,免去了开发人员将时间花费在繁琐的配置环境过程. Window 系统可以使用 ...
- 【正则表达式】--python（表示字符）
[前修知识] match :匹配 span:范围 match 是从头往后开始匹配,search不按照顺序,直接获取自己想要的,有就显示,没有就None r 代表反转义,前面也提到过这个知识,如果 ...
- [Machine Learning]学习笔记-线性回归
模型 假定有i组输入输出数据.输入变量可以用\(x^i\)表示,输出变量可以用\(y^i\)表示,一对\(\{x^i,y^i\}\)名为训练样本(training example),它们的集合则名为训 ...
- [flask实践] 解决qq邮箱/mysql的相关配置问题
笔者经过flask web(Miguel著,封面是一条狗)一书的学习,打算实现一个旅游类网站,在此过程中发现,相对于书中的flasky博客程序,需要作出一些改变: 1. 注册邮箱:国内要使用126,q ...
- 【二十二】mysqli事务处理
事务处理 事务基本原理 如果不开启事务,执行一条sql,马上会持久化数据.可见:默认的mysql对sql语句的执行是自动提交的! 如果开启了事务,就是关闭了自动提交的功能,改成了commit执行自动提 ...
- mysql--二进制日志(bin-log)三种格式介绍及分析
一.Mysql binlog日志有三种格式,分别为ROW.Statement以及MiXED.Row LevelBinary Log会记录成[每一行数据被修改的形式],然后在Slave端再对相同的数据进 ...
- 关于PHP 采集类
伟大的筒子们,我们需要经常采集. 不知道大家每次采集的时候会不会烦躁,不用八爪鱼,不用PYTHON 是不是感到手无力,看到正则匹配每次匹配不对,一换采集内容就是头疼,重新拼写正则? 不要说是高手 ,就 ...
- 网页设计——6.html其他标签
今天学习html的其他标签: 一.列表 1.无序列表ul 基本结构: <ul type="属性值"> <li>列表内容</li> </u ...