文件/大文件上传功能实现（JS+PHP）全过程

程序员文章站 2022-05-04 12:25:12

文件/大文件上传功能实现（JS+PHP）参考博文：掘金-橙红年代前端大文件上传路漫漫其修远 PHP + JS 实现大文件分割上传本文是学习文件上传后的学习总结文章，从无到有实现文件上传功能，前端小白写的代码不是最优，如果有错误的地方请多多指教，如果本文对你有所帮助，深感荣幸。近期公司的项 ......

文件/大文件上传功能实现（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){
   // 阻止默认表单提交
   e.preventdefault();
 
   // 创建表单
   // 默认配置了enctype="multipart/form-data"
   var formdata = new formdata();
   formdata.append('myfile',$('#myfile')[0].files[0])
 
   // 提交表单
   $.ajax({
     type: "post",
     url: 'post.php',
     data: formdata,
     // 阻止jquery赋予默认属性，使用formdata默认配置enctype="multipart/form-data"
     contenttype: false,
     // 阻止jquery自动序列化数据
     processdata: false,
     success: function(data){
       console.log('请求正常',data);
     }
   })
 })

2.大文件分割上传

简单上传痛点

简单上传，使用表单提交文件到服务器时，如果网络不好或者中途中断，会使文件上传失败，试想一下如果要上传文件很大，当你上传到99%时，突然间中断，又要重新上传，那该有多崩溃，那时你可能电脑的想砸了。
实现思路

大文件上传，实现的方法，就是将上传文件的二进制文件通过分割的形式，逐个上传到服务器，在上传完成后，服务器再对文件进行拼接操作。

为了能识别上传的数据，是哪个文件，我们必须要拥有一个文件标识符，用于识别接收到的文件数据是属于哪个文件的，以及可以实现避免重复上传，实现秒传功能等。

不要忘记由于是异步操作，而且操作的数据段大小不一，会导致整合时无法确认拼接熟悉怒，所以我们需要一个index标识数据段的位置。

通过初步整理，我们就需要以下的参数
1. 文件唯一标识符
2. 分割后数据段
3. 分割数据段的顺序索引值
经过思考，我们可以建立两个处理程序，来分别处理接受chunk数据段和合并chunk数据段。
1. file_getchunk.php
  
  功能：将分割chunk数据，整理并保存，此处我们用文件形式实现。
2. 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){
   // 阻止默认表单提交
   e.preventdefault();
   var myfile = $('#myfile')[0].files[0];
   // 定义文件标识符  
   var fileid = getfileidentifier(myfile);
   // 数据切片
   var chunks = fileslice(myfile);
   // 发送分割数据段
 sendchunk(fileid, chunks);
 })

生成文件唯一标识getfileidentifier()

此处可以使用md5，生成文件唯一的md5（相同文件md5相同），作为标识符。这里只初略的处理了一下文件标识。

   function getfileidentifier(file){
     // 获取文件标识符
     return file.size + file.name;
   }

分割方法fileslice()

先将文件使用blob文件继承的方法slice进行切割，生成blob字串。

  function fileslice(file, chunksize = 1024*1024*0.2){
    // 1.初始化数据
    var totalsize = file.size;
  var start = 0;
    var end = start + chunksize;
    var chunks = [];
    // 2.使用bolb提供的slice方法切片
    while(start < totalsize){
      var chunk = file.slice(start, end);
      chunks.push(chunk);
      start = end;
      end += chunksize;
    }
    // 3.返回切片组chunk[]
    return chunks;
  }

发送chunk方法sendchunk()

使用ajax依次发送已经分割好的chunk，并提供对应的数据，请求file_getchunk.php进行处理。此处task列表，用于保证文件分隔符全部已经完成上传。

 function sendchunk(id, chunks){
   // 逐个提交
   // 用于保证ajax发送完毕
   var task = [];
 
   chunks.foreach(function(chunk, index){
     var formdata = new formdata();
     formdata.append('fileid', id);
     formdata.append('myfilechunk', chunk);
     formdata.append('chunkindex', index);
     $.ajax({
       type: "post",
       url: 'file_getchunk.php',
       data: formdata,
       contenttype: false,
       processdata: false,
       success: function(done){
         // 移除已完成任务
         task.pop();
         console.log(done,' 已完成');
         if (task.length === 0) {
           // 发送完毕，整合文件
           console.log('通知整合');
           makefileintegration(id, chunks.length);
         }
       }
     })
     task.push('file working');
   })
 }

通知整合方法makefileintegration()

接收到整合通知，请求file_integration.php进行文件的整合处理。

 function makefileintegration(id, size){
   // 通知已传输完成
   $.post(
     "file_integration.php",
     {
       id: id,
       size: size
     },
     function(data){
       console.log(data);
     }
   );
 }

php- file_getchunk.php

当php监听到请求时，获取对应的数据，生成文件夹，按照chunkindex存储数据段。

 if(!is_dir('upload')){
   mkdir('upload', 0777);
 }
 
 $chunk = $_files['myfilechunk'];
 // 文件唯一标识
 $fileid = $_post['fileid'];
 // 临时文件夹名称
 $length = strlen($fileid) - (strlen($fileid) - strpos($fileid, '.'));
 $filedir = substr($fileid, 0, $length);
 
 $chunkindex = $_post['chunkindex'];
 
 $filepath = 'upload/' . $filedir;
 
 $filename = $filepath . '/' . $chunkindex;
 
 if(!is_dir($filepath)){
   mkdir($filepath, 0777);
 }
 move_uploaded_file($chunk['tmp_name'], $filename);
 
 echo $chunkindex;

php-file_integration.php

监听到整合请求，对文件夹下面的所有文件，进行依次拼接，并生成最终还原出来的文件。

 $fileid = $_post['id'];
 // 临时文件夹名称
 $length = strlen($fileid) - (strlen($fileid) - strpos($fileid, '.'));
 $filedir = substr($fileid, 0, $length);
 
 $size = $_post['size'];
 $file = './upload/' . $fileid;
 
 // 创建最终文件
 if(!file_exists($file)){
   // 最终文件不存在，创建文件
   $myfile = fopen($file, 'w+');
   fclose($myfile);
 } 
 // 用增加方式打开最终文件
 $myfile = fopen($file, 'a');
 
 for ($i = 0; $i < $size; $i++) {
   // 单文件路径
   $filepart = 'upload/' . $filedir . '/' . $i;
 
   if(file_exists($filepart)){
     $chunk = file_get_contents($filepart);
     // 写入chunk
     fwrite($myfile, $chunk);
   } else{
     echo "缺少part$i 文件，请重新上传";
     break;
   }
 }
 
 fclose($myfile);
 echo "整合完成";

3.更进一步

大文件分割上传功能已经基本实现，但是我们还可以拥有很多优化的地方

1.断点续存。

我们需要的文件已经可以正常的分割上传，服务端也可以正常接收切片，完成数据段切片的合并了。此时我们就可以进一步实现断点续存了。

断点续存，实现方法很简单，我们只需要获取到上传完成的数据段切片信息，就可以判断我们应该从哪个数据段开始继续传输数据。

获取已经完成数据段切片的信息，我们可以使用前端保存或者服务端获取。此处我们使用服务端接口检测，返回数据缺失位置来实现断点续存。

思路整理

我们要在上传前，请求服务端查询出中断时的位置，利用位置信息，筛选上传的数据段切片。

那么我们要增加的逻辑就是：
1. offset中断位置信息
2. 查询中断位置接口：file_get_breakpoint.php

实现

getfilebreakpoint()获取文件断点函数

此处要保证ajax执行顺序，才能正确获取offset偏移量，实现思路有很多。此处只使用jquery提供的将ajax请求变为同步，进行处理。

注：同步请求时，success函数返回值不可以直接return，要保存在一个变量中，在ajax请求外return才能生效。

 // 获取文件断点
 function getfilebreakpoint(id, size){
   var offset = '';
   $.ajax({
     type:"post",
     url:"file_get_breakpoint.php",
     data: {
       id: id,
       size: size
     },
     async: false,
     success:function(res){
       offset = parseint(res);
     }
   })
   return offset;
 }

在sendchunk()发送数据前获取offset

 // 上传前，请求file_integration.php接口获取数据段开始传输的位置
 var offset = getfilebreakpoint(id, chunks.length);

遍历chunks发送数据段时，增加筛选逻辑

  chunks.foreach(function(chunk, index){
    // ==============新增=================
    // 从offset开始传输
    if (index < offset) {
      return;
    }
    // ==============新增=================
    
    var formdata = new formdata();
    formdata.append('fileid', id);
    formdata.append('myfilechunk', chunk);
    formdata.append('chunkindex', index);
    $.ajax({
      type: "post",
      url: 'file_getchunk.php',
      data: formdata,
      contenttype: false,
      processdata: false,
      success: function(done){
        task.pop();
        console.log(done,' 已完成');
        if (task.length === 0) {
          console.log('通知整合');
          makefileintegration(id, chunks.length);
        }
      }
    })
    task.push(index+' is working');
  })

获取中断位置接口file_get_breakpoint.php

这里使用的获取中断位置的逻辑很简单（不是最优），只需要检测文件夹是否存在，再依次检测数据段是否缺失。缺失时返回缺失段的index，已存在返回chunks长度size，不存在时返回0

 // 1.检测数据文件是否存在(文件标识，数据段总数)
 $fileid = $_post['id'];
 $size = $_post['size'];
 // 临时文件夹名称
 $length = strlen($fileid) - (strlen($fileid) - strpos($fileid, '.'));
 $filedir = substr($fileid, 0, $length);
 
 // 2.按顺序检测缺失的数据段的位置
 // 检测是否存在文件夹
 if (is_dir("upload/$filedir")) {
   $offset = $size;
   // 检测数据段缺失下标
   for ($i = 0; $i < $size; $i++) {
     $filepath = "upload/$filedir/$i";
     if(!file_exists($filepath)){
       // 缺失i部分
       $offset = $i;
       break;
     }
   }
   // 输出偏移量
   echo $offset;
 } 
 else {
   // 是否存在已合并文件
   if(file_exists("upload/$fileid")){
     echo $size;
   } else{
     // 文件尚未上传
     echo 0;
   }
 }

2.文件秒传

文件秒传的概念，按照我的理解，就是在上传文件请求后，服务器端检测数据库中是否存在相同的文件，如果存在相同的文件，就可以告诉用户上传完成了。

此处在获取offset后，增加一个判断就可以实现
```
 var offset = getfilebreakpoint(id, chunks.length);
 // 增加判断
 if(chunks.length === offset) {
   console.log('文件已经上传完成');
   return;
 }
```
当然，这里仅仅是非常简单的处理，我们还可以使用md5来作为文件标识符，在在服务器端使用这个标识符是否存在相同文件。
3.md5检测文件完整性。

通过md5对文件加密，传输到服务器端，服务器端实现合并后对文件再进行一次md5加密，比对两串md5字串是否相同，就可以知道文件传输过程中是否完整。

3.上传完成后，存储数据段文件夹进行删除操作。

我们最后做一步就是将临时文件移除操作，在整合完成后，我们只需要在file_integration.php接口中，整合完成后，移除文件夹及其下面的所有文件。

 function deldir($path){
    //如果是目录则继续
   if(is_dir($path)){
       //扫描一个文件夹内的所有文件夹和文件并返回数组
     $p = scandir($path);
     foreach($p as $val){
       //排除目录中的.和..
       if($val !="." && $val !=".."){
         //如果是目录则递归子目录，继续操作
         if(is_dir($path.$val)){
           //子目录中操作删除文件夹和文件
           deldir($path.$val.'/');
           //目录清空后删除空文件夹
           @rmdir($path.$val.'/');
         }else{
           //如果是文件直接删除
           unlink($path.$val);
         }
       }
     }
     // 删除文件夹
     rmdir($path);
   }
 }
 //删除临时文件夹
 deldir("upload/$filedir/");

4.总结

　　按照上述步骤，可以跟着实现简单上传、大文件分割上传、断点续存等知识，起码下次遇到上传文件，心里也有了点底气。由于本人是前端小白，所以写的代码比较简陋，只是实现了功能，还有许多可以优化的地方，如果代码有误，还望指正。

上一篇： HttpClient

下一篇： webpack loader实现

文件/大文件上传功能实现（JS+PHP）全过程

文件/大文件上传功能实现（js+php）

1.简单文件上传

普通表单上传

ajax模拟表单上传文件

`html`

`jquery`

2.大文件分割上传

简单上传痛点

实现思路

php.ini配置

talk is cheap,show me the code

3.更进一步

1.断点续存。

思路整理

实现

2.文件秒传

3.md5检测文件完整性。

3.上传完成后，存储数据段文件夹进行删除操作。

4.总结

java大文件上传插件（java附件上传功能实现）

ajaxfileupload.js实现上传文件功能

AjaxFileUpload.js实现异步上传文件功能

用fileupload组件实现的大文件上传简单实例

html5拍照功能实现代码(htm5上传文件)

拥有网页版小U盘 ASP.NET实现文件上传与下载功能

php实现表单提交上传文件功能

php+ajax实现图片文件上传功能实例

.Net Core实现图片文件上传下载功能

js实现文件上传功能后台使用MultipartFile

文件/大文件上传功能实现（JS+PHP）全过程

文件/大文件上传功能实现（js+php）

1.简单文件上传

普通表单上传

ajax模拟表单上传文件

html

jquery

2.大文件分割上传

简单上传痛点

实现思路

php.ini配置

talk is cheap,show me the code

3.更进一步

1.断点续存。

思路整理

实现

2.文件秒传

3.md5检测文件完整性。

3.上传完成后，存储数据段文件夹进行删除操作。

4.总结

java大文件上传插件（java附件上传功能实现）

ajaxfileupload.js实现上传文件功能

AjaxFileUpload.js实现异步上传文件功能

用fileupload组件实现的大文件上传简单实例

html5拍照功能实现代码(htm5上传文件)

拥有网页版小U盘 ASP.NET实现文件上传与下载功能

php实现表单提交上传文件功能

php+ajax实现图片文件上传功能实例

.Net Core实现图片文件上传下载功能

js实现文件上传功能 后台使用MultipartFile

`html`

`jquery`

js实现文件上传功能后台使用MultipartFile