html5中如何将图片的绝对路径转换成文件对象
5星 · 超过95%的资源 115 浏览量
2020-12-14
04:39:11
上传
评论 1
收藏 57KB PDF 举报 
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类型，如果是未知类型，则返回一
个空字符串。
资源评论
萱呀2023-07-28这篇文件很棒，详细讲解了如何在html5中解决图片路径问题，我学到了很多新知识。
lirumei2023-07-28这篇文章提供了很实用的方法，让我能够轻松地将图片的绝对路径转换为文件对象。非常感谢！
有只风车子2023-07-28这篇文章非常实用，教会了我如何在html5中处理图片路径转换的问题，对我来说帮助很大。
实在想不出来了2023-07-28文章介绍了一种简单而实用的方法，帮助我在html5中处理图片路径的转换问题，效果很好。
神康不是狗2023-07-28这篇文件提供了一个很有用的解决方案，可以帮助我将图片的绝对路径转换成文件对象，非常实用。
weixin_38636577
- 粉丝: 4
- 资源: 935
