前端必知必会之文件上传攻略（一）

文件上传原理

根据http协议的定义，完成请求消息体的封装和解析，将二进制内容保存至文件。

关键字：

multipart/form-data

含义：

multipart表示资源有多种元素组成，form-data使用post方式或HTML Forms上传文件。

结构：

 

 

 

• 请求头：表示本次请求要上传文件，其中boundary表示分隔符。

Content-Type: multipart/form-data; boundary=----WebKitFormBoundary2ahjiirVMKa4Qn78

• 消息体- Form Data 部分

Content-Disposition: form-data 为固定值，表示一个表单元素，name 表示表单元素的 名称，回车换行后面就是name的值，如果是上传文件就是文件的二进制内容。

Content-Type：表示当前的内容的 MIME 类型(type/subtype)通用+子类，是图片还是文本还是二进制数据（text/.. application/... image/... video/...）。

解析:

客户端发送请求到服务器后，服务器拿到请求的消息体进行解析，解析出哪些是普通表单哪些是附件。一般不需要自行解析，有第三方库可用。

无刷新上传

关键字：

XMLHttpRequest

XMLHttpRequest2有了升级，首先就是可以读取和上传二进制数据，可以使用·FormData·对象管理表单数据。

示例：

<div>
        选择文件(可多选):
        <input type="file" id="f1" multiple/><br/><br/>
        <button type="button" id="btn-submit">上 传button>
div>

实现进度条

借助XMLHttpRequest2，实现单文件或多文件的上传进度条。

 

 

说明

• 页面内增加一个用于显示进度的标签 div.progress
• js 内处理增加进度处理的监听函数xhr.upload.onprogress
• event.lengthComputable这是一个状态，表示发送的长度有了变化，可计算
• event.loaded表示发送了多少字节
• event.total表示文件总大小
• 根据event.loaded和event.total计算进度，渲染div.progress

 <div>

        选择文件(可多选):
            <input type="file" id="f1" multiple/><br/><br/>

            <div id="progress">
                <span class="red">span>
            div>

        <button type="button" id="btn-submit">上 传button>

    div>

PS 特别提醒

xhr.upload.onprogress要写在xhr.send方法前面，否则event.lengthComputable状态不会改变，只有在最后一次才能获得，也就是100%的时候.