文件/大文件上传功能实现(JS+PHP)
参考博文:掘金-橙红年代 前端大文件上传
路漫漫 其修远 PHP + JS 实现大文件分割上传
本文是学习文件上传后的学习总结文章,从无到有实现文件上传功能,前端小白写的代码不是最优,如果有错误的地方请多多指教,如果本文对你有所帮助,深感荣幸。
近期公司的项目中,涉及到上传大文件的问题,大文件上传用普通表单上传时出现的问题是,无法断点续存,一但中途中断上传,就要重头开始,这很明显不是我们想要的,所以经过一番查询,学习了一下大文件分割上传的方法。并且使用简单的php
做服务端处理程序实现一个功能demo,供以后回顾使用。本人也是初出茅庐的前端小白,记录下各种功能的实现总结,代码有错误的地方,请多多指正。
1.简单文件上传
-
普通表单上传
表单上传是我们经常使用的功能,而且使用起来也是非常简单,我们只需要声明表单内容类型为enctype="multipart/form-data"
,表明表单上传文件的二进制数据。
- <form action="index.php" method="post" enctype="multipart/form-data">
<input type="file" name="myfile" />
<input type="submit" value="上传" />
</form>
点击上传按钮,就可以将表单发送到服务器,并使用index.php
接受到对应的表单数据,存入$_GET/$_POST
超级全局变量中,我们只需要使用move_uploaded_file
方法,将接收到的文件数据,存储起来,就实现了文件上传功能了。
- $myfile = $_FILES['myfile'];
//上传路径
$path = "upload/" . $myfile['name'];
if(move_uploaded_file($myfile['tmp_name'], $path)){
echo "上传成功";
} else{
echo "上传失败";
};
-
ajax模拟表单上传文件
当我们有需求,需要异步提交表单或者需要对上传文件做一定修改(例如:裁剪尺寸)时,普通的表单上传就不能满足我们的需求,因为我们无法修改表单的file值,这时候就需要ajax出场了。这里我们使用jQuery使用ajax更方便快捷。
我们需要做如下修改:
-
HTML
我们不需要配置form,只需要配置相应的ID,用于获取DOM元素对象。
- <form id="myForm">
<input type="file" name="myfile" id="myFile" />
<input type="submit" value="上传" id="submitForm"/>
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
-
JQuery
注意,jQuery
的ajax方法,会默认配置一些请求信息,所以我们需要重新配置放置jQuery
的默认行为导致数据格式或请求头信息出现问题。
这里的contentType
和processData
为必须项。
- $('#submitForm').on('click', function(e){
2.大文件分割上传
-
简单上传痛点
简单上传,使用表单提交文件到服务器时,如果网络不好或者中途中断,会使文件上传失败,试想一下如果要上传文件很大,当你上传到99%时,突然间中断,又要重新上传,那该有多崩溃,那时你可能电脑的想砸了。
-
实现思路
大文件上传,实现的方法,就是将上传文件的二进制文件通过分割的形式,逐个上传到服务器,在上传完成后,服务器再对文件进行拼接操作。
为了能识别上传的数据,是哪个文件,我们必须要拥有一个文件标识符
,用于识别接收到的文件数据是属于哪个文件的,以及可以实现避免重复上传,实现秒传功能等。
不要忘记由于是异步操作,而且操作的数据段大小不一,会导致整合时无法确认拼接熟悉怒,所以我们需要一个index标识数据段的位置。
通过初步整理,我们就需要以下的参数
-
文件唯一标识符
-
分割后数据段
-
分割数据段的顺序索引值
经过思考,我们可以建立两个处理程序,来分别处理接受chunk数据段和合并chunk数据段。
-
file_getchunk.php
功能:将分割chunk数据,整理并保存,此处我们用文件形式实现。
-
file_integration.php
功能:接收到整合通知,将数据段拼接,并生成文件。
整体流程大致如图:

-
PHP.ini配置
由于PHP默认配合中,限制了POST与上传的大小,所以我们为了测试,需要修改php.ini
中的默认配置。
- post_max_size = 50M
upload_max_filesize = 50M
-
talk is cheap,show me the code
-
HTML
- <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<form id="myForm">
<input type="file" name="myfile" id="myFile" />
<input type="submit" value="上传" id="submitForm"/>
</form>
-
JQuery
获取文件对象,文件标识符,分割文件,通过ajax发送切割好的blob数据段。
- $('#submitForm').on('click', function(e){
- ?
-
生成文件唯一标识getFileIdentifier()
此处可以使用md5,生成文件唯一的md5(相同文件md5相同),作为标识符。这里只初略的处理了一下文件标识。
- function getFileIdentifier(file){
-
分割方法fileSlice()
先将文件使用blob文件继承的方法slice进行切割,生成blob字串。
- function fileSlice(file, chunkSize = 1024*1024*0.2){
-
发送chunk方法sendChunk()
使用ajax依次发送已经分割好的chunk,并提供对应的数据,请求file_getchunk.php
进行处理。此处task列表,用于保证文件分隔符全部已经完成上传。
- function sendChunk(id, chunks){
-
通知整合方法makeFileIntegration()
接收到整合通知,请求file_integration.php
进行文件的整合处理。
- function makeFileIntegration(id, size){
-
PHP- file_getchunk.php
当PHP监听到请求时,获取对应的数据,生成文件夹,按照chunkIndex
存储数据段。
- if(!is_dir('upload')){
mkdir('upload', 0777);
}
?
$chunk = $_FILES['myFileChunk'];
-
PHP-file_integration.php
监听到整合请求,对文件夹下面的所有文件,进行依次拼接,并生成最终还原出来的文件。
- $fileId = $_POST['id'];
3.更进一步
大文件分割上传功能已经基本实现,但是我们还可以拥有很多优化的地方
-
1.断点续存。
我们需要的文件已经可以正常的分割上传,服务端也可以正常接收切片,完成数据段切片的合并了。此时我们就可以进一步实现断点续存了。
断点续存,实现方法很简单,我们只需要获取到上传完成的数据段切片信息,就可以判断我们应该从哪个数据段开始继续传输数据。
获取已经完成数据段切片的信息,我们可以使用前端保存或者服务端获取。此处我们使用服务端接口检测,返回数据缺失位置来实现断点续存。
-
2.文件秒传
文件秒传的概念,按照我的理解,就是在上传文件请求后,服务器端检测数据库中是否存在相同的文件,如果存在相同的文件,就可以告诉用户上传完成了。
此处在获取offset后,增加一个判断就可以实现
- var offset = getFileBreakpoint(id, chunks.length);
当然,这里仅仅是非常简单的处理,我们还可以使用MD5来作为文件标识符,在在服务器端使用这个标识符是否存在相同文件。
-
3.MD5检测文件完整性。
通过md5对文件加密,传输到服务器端,服务器端实现合并后对文件再进行一次md5加密,比对两串md5字串是否相同,就可以知道文件传输过程中是否完整。
-
3.上传完成后,存储数据段文件夹进行删除操作。
我们最后做一步就是将临时文件移除操作,在整合完成后,我们只需要在file_integration.php
接口中,整合完成后,移除文件夹及其下面的所有文件。
- function deldir($path){
4.总结
按照上述步骤,可以跟着实现简单上传、大文件分割上传、断点续存等知识,起码下次遇到上传文件,心里也有了点底气。由于本人是前端小白,所以写的代码比较简陋,只是实现了功能,还有许多可以优化的地方,如果代码有误,还望指正。