HTML结构
<div id="image"></div>
<input type="file" id="uploadFile">
<div id="fileInfo"></div>
CSS样式
#image{
/*width:300px;*/
height:400px;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
#fileInfo{
min-height: 20px;
line-height: 20px;
border:2px solid #DB4700;
padding: 5px;
}
JavaScript代码
var uploadFile = document.getElementById('uploadFile');
var bgImage = document.getElementById('image');
var fileInfo = document.getElementById('fileInfo');
//监听input的变化
uploadFile.addEventListener('change',function () {
//清空背景图
bgImage.style.backgroundImage = '';
if(!uploadFile.value){
fileInfo.innerHTML = '没有选择任何文件';
return;
}
//获取file
var file = uploadFile.files[0];
fileInfo.innerHTML = `文件名称:${file.name}<br>
文件大小:${file.size}<br>
修改时间:${file.lastModifiedDate}`;
if(file.type !== 'image/jpg' && file.type !== 'image/png'){
alert('图片格式不对');
return;
}
console.log(uploadFile.files[0]);
//读取文件
var reader = new FileReader();
reader.onload = function (e) {
console.log(reader);
var data = e.target.result;
bgImage.style.backgroundImage = 'url('+ data +')';
}
reader.readAsDataURL(file);
})
我们打开上面的页面,选择一个图片,可以看到图片的名称、图片大小、修改时间,也可以预览一下图片。
下图是我们获取文件的控制台信息
uploadFile.files[0] 返回一个FileList对象(有一个属性length,表示文件(File对象)个数),里面包含了一个或多个File对象,每个File对象都有自己的属性:
- file.name:文件名,该属性只读。
- file.size:文件大小,单位为字节,该属性只读。
- file.type:文件的MIME类型,如果分辨不出类型,则为空字符串,该属性只读。
- file.lastModified:文件的上次修改时间,格式为时间戳。
- file.lastModifiedDate:文件的上次修改时间,格式为Date对象实例
注意:如果要允许用户选取多个文件,需要加上multiple属性
<input type="file" multiple id="uploadFile"/>
上面我们知道如何获取文件信息了,那么我们如何使用这些信息呢?
这时我们就要用到FileReader API了,此API用于读取文件,即把文件内容读入内存。
首先,我们需要实例化一个FileReader();
var reader = new FileReader();
不同类型的文件,FileReader提供了不同的方法来读取文件:
- readAsBinaryString(Blob|File):返回二进制字符串,该字符串每个字节包含一个0到255之间的整数。
- readAsText(Blob|File,opt_encoding):返回文本字符串。默认情况下,文本编码格式是’UTF-8’,可以通过可选的格式参数,指定其他编码格式的文本。
- readAsDataURL(Blob|File):返回一个基于Base64编码的data-uri对象。
- readAsArrayBuffer(Blob|File):返回一个ArrayBuffer对象,即固定长度的二进制缓存数据。
在上面的代码中,我们总共分为5个步骤
- 我们通过onchange去监听input内文件信息的变化 。
- 通过file.type判断用户选择的是否是图片。
- 使用File对象的readAsDataURL()方法来返回一个data URL
- 然后使用onload事件监听文件是否读取完毕。
- 如果读取完毕,我们就可以使用事件对象e来读取文件内容,也就是e.target.result。
FileReader API的其他监听事件
- onabort方法:读取中断或调用reader.abort()方法时触发。
- onerror方法:读取出错时触发。
- onload方法:读取成功后触发。
- onloadstart方法:读取将要开始时触发。
- onprogress方法:读取过程中周期性触发。
- onloadend方法:读取完成后触发,不管是否成功。触发顺序排在 onload 或 onerror 后面。
表单File的一些控件
<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">
<input type="file" accept="image/*;capture=camera">直接调用相机
<input type="file" accept="image/*" />调用相机 图片或者相册
<input type="file" multiple accept="image/*" />
注意:capture表示,可以捕获到系统默认的设备,比如:camera–照相机;camcorder–摄像机;microphone–录音。如果multiple,capture就不生效了,因为multiple是专门用来支持多选的。