1 <div class="file-preview">
 2     <div class="add" style="width: 50px;height: 50px;line-height: 50px;text-align: center;background-color: #eeeeee;position: relative;" >
 3         +
 4         <input type="file" id="fileInput" style="opacity: 0;z-index: 1;position: absolute;top: 0;left: 0;width: 100%;height: 100%;cursor: pointer;">
 5     </div> 6     <div class="image-box" style="margin-top: 20px;height: 200px;line-height: 0">
 7         <img src="" alt="" style="max-height: 200px;display: none" id="image">
 8         <video src="" controls style="display: none;" height="200"></video>
 9     </div>10     <div class="progress" style="background-color: #cccccc;width: 700px;height: 20px;position: relative;text-align: center;line-height: 20px;margin-top: 20px;">
11         <span id="percent">0%</span>
12         <div class="loading" style="position: absolute;height: 100%;background-color: blue;top: 0;left: 0;"></div>
13     </div>
14 </div>

 1 var img = document.querySelector('#image');   // 获取image
 2
 3 var video = document.querySelector('video');  //  获取video
 4
 5 var input = document.querySelector('#fileInput'); // 获取input
 6
 7 var loading = document.querySelector('.loading'); // 获取进度条
 8
 9 var percent = document.querySelector('#percent'); // 获取百分比
10
11 var reader = new FileReader(); // 初始化一个 FileReader
12
13 var file = {}; // 文件对象
14
15 var fileType = ''; //  文件类型

 1 input.addEventListener('change', function(event) {
 2     file = event.target.files[0];    // 获取文件对象
 3     video.style.display = 'none';   // 隐藏video
 4     img.style.display = 'none';     //  隐藏image
 5     percent.innerHTML = '0%';       //  初始化百分比
 6     loading.style.width = '0px';    //  初始化进度条
 7     if (event.target.files.length) {
 8         fileType = file.type.split('/')[0];  // 获取文件类型
 9         reader.readAsDataURL(file);   // 开始读取文件
10     }
11 });

 1 reader.onabort = function (e) {   // 终止读取触发     abort()方法会触发它
 2     console.log('abort')
 3 };
 4
 5 reader.onloadstart = function (e) {  // 开始读取触发
 6     console.log('start')
 7 };
 8
 9 reader.onprogress = function (e) {  // 读取过程触发  可以获得读取进度
10
11     percent.innerHTML = (e.loaded/e.total).toFixed(2) * 100 + '%';  // 进度百分比
12
13     loading.style.width = (e.loaded/e.total) * 700 + 'px';   // 进度百分比 乘  总宽度  等于  进度条的宽度
14 };
15
16 reader.onload = function (e) {   // 读取结束并且读取成功触发  在这里可以拿到result
17     console.log('loaded');
18     loading.style.width = '700px';   // 进度条完成
19     percent.innerHTML = '100%';     // 百分比完成
20     if (fileType === 'video') {
21         video.src = this.result;
22         video.style.display = 'block'   // 显示视频
23     } else if (fileType === 'image'){
24         img.src = this.result;
25         img.style.display = 'block'  // 显示图片
26     }
27 };
28
29 reader.onloadend = function (e) {  // 读取结束触发 ， 在load之后
30     console.log('end')
31 };