html5大文件上传技术

来源：互联网发布：mac没有 hosts文件编辑：程序博客网时间：2024/06/14 15:37

html5大文件上传技术

引言

普通html表单在上传几KB或几MB级别的文件基本无压力，但在上传上百MB甚至是GB级别大文件很无爱。而且一般服务器单个文件上传限制基本都在几MB之内。如何有效突破限制，上传大文件技术值得深入探讨。

html5大文件上传技术
- 一般解决方案
- html5文件分割上传解决方案
  - 代码实现
  - 运行截图
- 上传文件相关问题讨论
  - 安全问题
  - 用户体验优化
  - 上传性能优化

一般解决方案
html5文件分割上传
上传相关问题讨论

一般解决方案

一般解决方案粗劣总结主要由以下几种：

FTP
使用ftp一般能满足上传大文件需求，但是从用户角度来讲，ftp方式大众普及度不高，用户使用还得学习。
理想的状态下是没必要让用户知道的就不需要让用户知道，无知是福，简单是美。不要去轻易挑战用户积累的使用习惯，让用户感觉不到上传大文件和小文件的差异。
相关组件插件开发
一些诸如网盘、邮箱之类的在上传大文件时会开发一些相关插件来解决问题，但从用户角度讲，网页顶部会弹出一些安装插件的提示，容易产生厌烦、抵触、怀疑等不良使用情绪，效果还是有些折扣。
修改服务器配置
也有一些修改服务器最大上传配置的做法，诸如修改PHP.ini、IIS之类，这种做法在用户界面层面是感觉不到差异了，但是这种做法相对粗糙，对资源利用的效率不高，大文件传输卡顿超时、浏览器崩溃等问题非常明显，使用体验还是很糟糕。

html5文件分割上传解决方案

HTML5提供的文件API中可以轻松的对文件进行分割切片，然后通过JavaScript异步处理向服务器传输数据，突破对大文件上传的限制，同时异步处理在一定程度上也提高了文件上传的效率。用户体验上也优于前述方案。

`代码实现`

下面以php为例，讲一下具体实现过程。在html端将文件进行切割，提交给upload.php1，upload.php将上传的文件片移到文件夹临时存放.当最后一块文件片成功提交到upload.php后，向merge.php提交一个合并文件片的请求。2

核心代码如下：
index.html

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>大文件上传实例</title>    <script type="text/javascript">        const BYTES_PER_CHUNK = 1024 * 1024; // 每个文件切片大小定为1MB .        var slices;        var totalSlices;        //发送请求        function sendRequest() {            var blob = document.getElementById('file').files[0];            var start = 0;            var end;            var index = 0;            // 计算文件切片总数            slices = Math.ceil(blob.size / BYTES_PER_CHUNK);            totalSlices= slices;            while(start < blob.size) {                end = start + BYTES_PER_CHUNK;                if(end > blob.size) {                    end = blob.size;                }                uploadFile(blob, index, start, end);                start = end;                index++;            }        }        //上传文件        function uploadFile(blob, index, start, end) {            var xhr;            var fd;            var chunk;            xhr = new XMLHttpRequest();            xhr.onreadystatechange = function() {                if(xhr.readyState == 4) {                    if(xhr.responseText) {                        alert(xhr.responseText);                    }                    slices--;                    // 如果所有文件切片都成功发送，发送文件合并请求。                    if(slices == 0) {                        mergeFile(blob);                        alert('文件上传完毕');                    }                }            };            chunk =blob.slice(start,end);//切割文件            //构造form数据            fd = new FormData();            fd.append("file", chunk);            fd.append("name", blob.name);            fd.append("index", index);            xhr.open("POST", "upload.php", true);            //设置二进制文边界件头            xhr.setRequestHeader("X_Requested_With", location.href.split("/")[3].replace(/[^a-z]+/g, '$'));            xhr.send(fd);        }        function mergeFile(blob) {            var xhr;            var fd;            xhr = new XMLHttpRequest();            fd = new FormData();            fd.append("name", blob.name);            fd.append("index", totalSlices);            xhr.open("POST", "merge.php", true);            xhr.setRequestHeader("X_Requested_With", location.href.split("/")[3].replace(/[^a-z]+/g, '$'));            xhr.send(fd);        }    </script></head><body><input type="file" id="file"/><button  onclick="sendRequest()">上传</button></body></html>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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

upload.php

<?php//省略了文件接收判断isset部分//当前目录下建立一个uploads文件夹//接收文件名时进行转码，防止中文乱码。$target = "uploads/" .iconv("utf-8","gbk",$_POST["name"]) . '-' . $_POST['index'];move_uploaded_file($_FILES['file']['tmp_name'], $target);// Might execute too quickly.sleep(1);1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9

merge.php

<?php//文件合并$target = "uploads/" .iconv("utf-8","gbk",$_POST["name"]);$dst = fopen($target, 'wb');for($i = 0; $i < $_POST['index']; $i++) {    $slice = $target . '-' . $i;    $src = fopen($slice, 'rb');    stream_copy_to_stream($src, $dst);    fclose($src);    unlink($slice);}fclose($dst);1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14

`运行截图`

以上传Linux Mint 操作系统 iso（1.31GB）为例，每个文件块大小为1MB，上传共计耗时3.8分钟。

1M文件块上传耗时

每个文件块大小为2MB时，上传共计耗时2分钟

2M文件块上传耗时

每个文件块大小为4MB时，上传共计耗时1分钟
4M文件块上传耗时

上传文件相关问题讨论

文件上传相关问题简要总结一下，做个抛砖引玉，希望共同完善。

安全问题

上传文件要做文件检测，抛出异常，保持程序健壮性。要做好文件类型过滤，存放的目录不给执行权限。这些虽然都是老掉牙，但是不得马虎啊。

用户体验优化

文件拖拽上传确实很方便。
文件批量上传，有很多业务是需要批量上传文件，如果一次只能上传一个文件，让用户频繁操作是很狗血无聊的事。
文件上传时可根据需要提供上传进度条、上传百分比显示、剩余上传时间等。避免用户因无交互响应产生的焦躁不安等负面使用情绪。

上传性能优化

断点续传。根据已经上传的部分hash值对比定位到已经完成的部分，因网络中断等原因可迅速恢复故障前状态继续上传。
文件的完整性。上传文件前后进行MD5对比，确保上传完整唯一。
文件块分割优化。要文件容量大小、文件块大小、请求次数、网络连接状态、服务器性能等都对上传耗时产生影响，根据各相关因素的变化合理规划，求出分割文件块大小的最优解，以提升文件上传效率。

代码原始参考码迷网mamicode.com ↩
代码原始参考 stackoverflow ↩

阅读全文

0 0