监听进程的方法onprogress
1 )文件读取的progress事件属于FileReader对象。
2 )下载的progress事件属于XMLHttpRequest对象。
3 )上传的progress事件属于XMLHttpRequest.upload对象。
本案例主要实现了文件读取、文件上传进度的可视化显示
demo功能
可添加并上传多个文件,每添加一个文件,会进行读取与上传,上传后存储文件与文件信息缓存于files数组中;
文件添加后,先显示读取进度条,读取100%后开始上传并显示上传进度条;
读取文件时,文件标题会显示文件读取中...,进度条为文件读取进度;
上传文件时,文件标题更新为具体文件名称与已上传的实时数据量,动态更新上传量,进度条为上传进度;
上传完毕,自动隐藏进度条;
注意点1:页面上只有一个input[type=file]框,但为了存储多个文件的二进制数据,这里将二进制数据缓存到files数组中,input[type=file]框只作为实时数据的处理使用;
注意点2:读取进度在实际应用中是可以省略的,本demo中读取后会将文件二进制数据缓存如files数组中,如果省略这步,可以不用读取文件。在这里主要用于体验文件读取进度的显示和缓存数据;
页面与样式
文件读取中...
{ { file.fileName }}({ { file.uploadSize}})
Add attachment
复制代码
background-color: #f2f2f2;
border-radius: 4px;
overflow: hidden;
border: 1px solid #ddd;
padding-left: 0;
}
ul::before {
content: 'Attachment';
height: 32px;
line-height: 32px;
display: block;
padding-left: 11px;
}
ul li.file_item {
margin-bottom: 1px;
}
ul li {
list-style: none;
position: relative;
background-color: #fff;
height: 32px;
padding-left: 11px;
overflow: hidden; /* 解决margin塌陷 */