网络-14【视频上传模块】

一.基础知识

(1).appliaction/x-www-form-urlencoded

POST的默认的编码格式就是appliaction/x-www-form-urlencoded

把表单数据变成键值对的编码方式

(2).multipart/form-data

二进制形式的编码

用来传输文件

form表单也叫同步上传

(3).多文件上传

<input type="file" name="file[]" multiple/>

加multiple多上传,记得加[]

(4).FormData()

实例化表单new FormData()

var fd =new  FormData();
fd.append('Username',ousername);
console.log(fd)

打印出实例化对象，里面有个原型，再都什么都没有

 调用

fd.get('username')

获取不存在数据返回null而不是undefined

设置

fd.set('username','里斯')

检测

fd.has('username')

如果有这条数据则打印true

删除

fd.delete('username')

打印出来是null 不是Undefined

(5).files

通过files来获得信息(会返回一个类数组，里面有提交文件的各种信息)

var oFile = document.getElementsByClassName('form')[0];
oFile.onchange = function(){
    log(oFile.files)
}

(6).onprogress

通过o的upload.onprogress来监听上传进度

通过o的upload.onload来监听上传是否完毕

通过e.loaded/e.total来计算上传百分比

o.upload.onprogress = function(e){
var e = e || window.event;
e.loaded/e.total *100 +'%'
}

二.实战

(1).知识点补充

display:inline; 行内元素显示

cursor:pointer;指针变为抓手

visibility:hidden;占用位置实现隐藏

(2).原理解析

图片切换进度原理

一张图片里分别有三张图片，通过background-poistion左右移动图片即可完成三种图片的状态切换

首先先显示第一张图片，和第三张图片(width为0所以不显示)，在校验完格式后，图片定位切换就显示第二张图片了

第三张图片随着progress的增加而增加

css控制样式解析

.upload-modal-wrap.show 控制整体传输框的开启
.upload-area.btn 控制第一张图片也就是提交页面的出现
.upload-area.uploading 控制第二张图片的出现

最后只需要把状态加个finished即可完成成功的样式
.upload-modal .upload-ctn .upload-area.uploading.finished .upload-info .percent{
    display: none;
}
.upload-modal .upload-ctn .upload-area.uploading.finished .upload-info .upload-success{
    display: inline;
}

书写步骤

1. 书写打开/关闭窗口showModal函数
2. 通过监听input的change事件调用uploadFile方法
3. 通过fils获取详细信息，判断视频个数，通过正则判断后缀!/\.(mp4)$/.test(fileName  判断视频大小3221225472
4. 验证通过后调用 doUpload开始上传
5. 实例化FormData,
6. 将files append到实例化对象中
7. 发起异步请求:

	 var o = window.XMLHttpRequest ?
            new window.XMLHttpRequest() :
            new ActiveXObject('Microsoft.XMLHTTP');

    if(!o){
      throw new Error('您的浏览器不支持AJAX异步发起HTTP请求');
    }

    o.open('post', 'server/upload.php');

1. 改变area(显示图片的盒子)的状态为第二张图片
2. 通过o.upload.onprogress事件监听上传进度
3. 通过e.loaded/e.tota*100计算出百分比 改变第三张图片宽度
4. 取整tofixed(1指定位数)显示到前端文字处
5. 通过o.upload.onload事件监听完成
6. 完成后显示成功隐藏进度 通过css添加finished即可完成
7.  o.send(fd);发送结束

项目总结

1.三个css属性

2.图片显示的方法

3.通过css改变完成后的样式控制

4.files是通过事件对象获得的不是事件源，e.loaded和total才是

5.发起异步请求的方法

6.fromData的使用

7.通过onprogress监听进度，onload监听完成

(3).JS源码

;(function(doc){
    var oOpen = doc.getElementsByClassName('js-open-mod-btn')[0],
        oClose = doc.getElementsByClassName('js-close-mod-btn')[0],
        oWrap = doc.getElementsByClassName('js-upload-modal')[0],
        oViedo = doc.getElementById('videoFile'),
        oArea = doc.getElementsByClassName('js-upload-area')[0],
        oPercent = doc.getElementsByClassName('js-percent')[0],
        oProgress = doc.getElementsByClassName('js-progress-bar')[0],
        overSize = 3221225472;
    var init = function(){
        bindEvent();
    }
    function bindEvent(){
        oOpen.addEventListener('click', openOrCloseWrap.bind(null,true), false);
        oClose.addEventListener('click', openOrCloseWrap.bind(null,false), false);
        oViedo.addEventListener('change', regUploadFile, false);
    }
    function openOrCloseWrap(status){
        if(status){
            oWrap.className +=' show';
        }else{
            oWrap.className = 'upload-modal-wrap js-upload-modal'
        }
    }
    function regUploadFile(){
        var files = this.files[0],
            fileSize = files.size,
            fileName = files.name,
            fileLen = this.files.length;
        if(fileLen > 1){
            console.log("您提交的文件超过1个");
            return;
        }
        if(fileSize > overSize){
            console.log("文件超过大小");
            return
        }else if(!/\.(mp4)$/.test(fileName)){
            console.log("文件格式不正确");
            return
        }else{
            doUpload(files);
        }

    }
    function doUpload(file){
        var fm = new FormData();
        fm.append('file',file);
        var o = window.XMLHttpRequest ?
                new XMLHttpRequest() :
                new ActiveXObject("Microsoft.XMLHTTP");
        if(!o){
            throw new Error('浏览器不支持')
        }
        o.open('post','server/upload.php');
        oArea.className  = 'upload-area js-upload-area uploading';
        o.upload.onprogress = function(e){
            var e= e || e.event;
            oProgress.style.width = (e.loaded/e.total)*100+'%';
            oPercent.innerText = (e.loaded/e.total*100).toFixed(1)+'%';
        }
         o.upload.onload = function(){
        oArea.className = 'upload-area js-upload-area uploading finished';
        oPercent.innerHTML = '0.0%';
    }
        o.send(fm);
    }
    init();
})(document);