html5中如何将图片的绝对路径转换成文件对象_js图片绝对路径在哪 - CSDN文库

5星 · 超过95%的资源 7 浏览量更新于2023-05-04 评论 1 收藏 57KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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类型，如果是未知类型，则返回一

个空字符串。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论5

萱呀

2023-07-28

这篇文件很棒，详细讲解了如何在html5中解决图片路径问题，我学到了很多新知识。

weixin_38636577

粉丝: 4
资源: 935

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈