├── README.md
├── sample.php
├── shard.js
└── shard.php
/README.md:
--------------------------------------------------------------------------------
1 | # shardUpload
2 | HTML5 大文件分片上传
3 |
4 | #快速使用
5 | ```html
6 |
7 |
8 | ```
9 | ```javascript
10 |
11 |
14 | ```
15 |
16 | #使用说明
17 |
18 | ```
19 | shardUpload.init(elementID,uploadUrl,config)
20 | ```
21 |
22 | - elementID 绑定的元素ID，绑定后点击这个元素会出现选择文件框
23 |
24 | - uploadUrl 上传的服务端地址
25 |
26 | - config 配置参数
27 |
28 | 在绑定的元素上设置 data-shardUpload属性，则在上传成功后，会将对应元素的value设置为服务返回的数据，如上面的例子中，上传成功后，会吧video的value设置为服务器返回的数据（shard.php返回的数据为合并后的文件的路劲）
29 |
30 |
31 | #config说明
32 |
33 | - exts 允许上传的文件类型，多种类型用 | 分割，如：mp4|flv|avi
34 |
35 | - chunk 每个碎片分割的大小，默认值2M。如：设置1024*1024表示每个碎片为1M（注：以B为单位，不是以M为单位）
36 |
37 | - async 同时并行上传的碎片数，默认值1个
38 |
39 | - token 上传令牌，将token传给服务端，服务端可以验证后再上传
40 |
41 | - parame 其他需要传给服务端的参数，如：{id:5,category_id:16}
42 |
43 | - callback 回调函数，下面有详细说明，
44 |
45 | #callback回调函数
46 |
47 | ```
48 | callback(file,message,status)
49 | ```
50 |
51 | - file 文件选择框内的原始文件对象，可以通过file.size获取文件大小 file.name获取文件名称等等
52 |
53 | - message 传入的提示信息/结果，如：上传错误或上传成功后服务器返回的信息
54 |
55 | - status 状态/信息类型，通过判断status来执行不同的操作
56 |
57 | ```javascript
58 | function myCallback(file,message,status){
59 | //当设置了回调函数后，默认的上传进度条将不会显示，如果要让进度条显示，则调用shardUpload.tipDisplay(message,status)
60 | shardUpload.tipDisplay(message,status) //显示默认的进度条
61 | if(status == 'success') {
62 | //当status为success的时候，message返回的是服务端合并文件后返回的信息，一般为合并的文件名称
63 | document.getElementById('output').innerHTML = message
64 | }else if(status == 'process'){
65 | //当status为process的时候，返回当前上传进度,返回0-100
66 | document.getElementById('output').innerHTML = message + '%';
67 | }else if(status == 'merge'){
68 | //当status为merge时，文件上传完成，通知服务端开始合并文件,message为正在合并文件
69 | document.getElementById('output').innerHTML = message;
70 | }else if(status == 'failed'){
71 | //文件上传失败
72 | }else if(status == 'cancel'){
73 | //文件上传取消
74 | }else if(status == 'error'){
75 | //文件格式不正确
76 | }
77 | }
78 |
79 | //全部参数都设置的使用方法
80 |
81 | shardUpload.init('upload-btn','shard.php',{
82 | exts:'mp4|flv', //只允许上传mp4或flv格式
83 | chunk:4*1024*1024, //按4M分割
84 | async:5,//允许同时上传5个碎片
85 | token:'', //上传token为session内的token，服务器端判断 $_POST['shard-token'] == $_SESSION['uptoken']
86 | param:{id:5,category_id:10}, //其他参数，服务器端获取 $_POST['id']/$_POST['category_id']
87 | callback:myCallback, //上面设置的回调方法
88 |
89 | })
90 |
91 | ```
92 | #服务器端说明
93 |
94 | 服务器端可以通过request获取到传入的参数，如php的为 $_POST['shard-name']
95 |
96 | - shard-data 传入的文件对象
97 | - shard-name 上传的文件名，此文件名加入了随机数，防止同时上传相同文件名文件的时候冲突
98 | - shard-total 总共碎片数
99 | - shard-index 当前碎片编号 从1开始
100 | - shard-token 如果设置了token则会传给服务端
101 | - shard-merge 当传入为yes的时候，则表示上传完成，需要服务器端合并文件
102 |
103 |
104 |
105 |
106 |
107 |
--------------------------------------------------------------------------------
/sample.php:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | sample
6 |
13 |
14 |
15 |
16 |
shardUpload HTML5+PHP 大文件分片上传
17 |
20 |
26 |
27 |
';
272 | tipDiv.innerHTML = tipHTML;
273 | document.body.appendChild(tipDiv);
274 | }
275 |
276 | }
277 |
278 | function createXMLHttpRequest() {
279 | var XMLHttpReq;
280 | try {
281 | XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");//IE高版本创建XMLHTTP
282 | }
283 | catch(E) {
284 | try {
285 | XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE低版本创建XMLHTTP
286 | }
287 | catch(E) {
288 | XMLHttpReq = new XMLHttpRequest();//兼容非IE浏览器，直接创建XMLHTTP对象
289 | }
290 | }
291 | return XMLHttpReq;
292 | };
293 |
294 | window.shardUpload = shardUpload;
295 | }(window);
296 |
297 |
298 |
--------------------------------------------------------------------------------
/shard.php:
--------------------------------------------------------------------------------
1 | '.$index;
16 | }
17 |
18 | function merge(){
19 | $name = $_POST['shard-name'];
20 | $total = $_POST['shard-total'];
21 | $dr = _UPLOAD_PATH;
22 | $exts = explode('.', $name);
23 | $newName = md5($name.time()).'.'.$exts[count($exts)-1];
24 | $newFile = $dr.$newName;
25 | $fp = fopen($newFile,"ab");
26 | for ($i=1; $i <= $total; $i++) {
27 | $thisfilepath = shardName($name,$i);
28 | $handle = fopen($thisfilepath,'r');
29 | fwrite($fp,fread($handle,filesize($thisfilepath)));
30 | fclose($handle);
31 | unlink($thisfilepath);
32 | }
33 | fclose($fp);
34 | echo $newFile;
35 | }
36 |
37 | function shardName($name,$index){
38 | //echo _UPLOAD_PATH.md5($name).'_'.$index.'.txt';
39 | return _UPLOAD_PATH.md5($name).'_'.$index.'.txt';
40 | }
41 |
42 | if($_POST['shard-merge'] == 'yes'){
43 | merge();
44 | }else{
45 | shardUpload();
46 | }
47 |
48 |
49 | ?>
--------------------------------------------------------------------------------