1、使用第三方插件（Flash，ActiveX，l浏览器插件）

优点：
交互性与可控性（多文件、进度展示、续传、暂停）
性能好（可使用底层协议通信）
缺点：
需要安装浏览器插件

普通文件上传例子：

1
2
3
4
<form action="xxx" enctype="multipart/form-data" method="post">
    <p>附件： <input type="file" name="myfile"></p>
    <p><button>提交</button></p>
</form>

2、使用隐藏的iframe模拟异步上传

优点：
浏览器原生支持，不需要插件
广泛的浏览器兼容性
缺点：
交互性差、体验差，上传过程基本不可控
性能差

iframe方式上传例子：

1
2
3
4
5
<iframe name="fmr" style="display:none"></iframe>
<form action="xxx" enctype="multipart/form-data" target="fmr" method="post">
    <p>附件： <input type="file" name="myfile"></p>
    <p><button>提交</button></p>
</form>

3、使用 xhr level 2 纯 ajax 异步上传

优点：
支持 h5 的浏览器原生支持，不需要插件
交互性较好
缺点：
浏览器支持的限制

ajax 方式例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div>
 <p>附件：<input type="file" id="myfile"></p>
</div>
<script>
    function upload() {
        // 1、准备FormData
        var fd = new FormData();
        fd.append("myfile", $("#myfile")[0].files[0])
        // 创建 xhr对象
        var xhr = new XMLHttpRequest();
    
        xhr.upload.onprogress = function(event) {}
        // 传输开始事件
        xhr.onloadstart = function() {}
        // ajax过程成功完成事件
        xhr.onload = function() {}
        // ajax过程发生错误
        xhr.onerror = function() {}
        // ajax被取消
        xhr.onabort = function() {}
        // 传输结束，不管成功失败都会被触发
        xhr.onloadend = function() {}
        //发起ajax请求
        xhr.open();
        xhr.send();
    }
</script>