经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
文件/大文件上传功能实现(JS+PHP)全过程
来源:cnblogs  作者:年糕崽  时间:2019/10/15 8:55:03  对本文有异议

文件/大文件上传功能实现(JS+PHP)

 

参考博文:掘金-橙红年代 前端大文件上传

路漫漫 其修远 PHP + JS 实现大文件分割上传

本文是学习文件上传后的学习总结文章,从无到有实现文件上传功能,前端小白写的代码不是最优,如果有错误的地方请多多指教,如果本文对你有所帮助,深感荣幸。

 

近期公司的项目中,涉及到上传大文件的问题,大文件上传用普通表单上传时出现的问题是,无法断点续存,一但中途中断上传,就要重头开始,这很明显不是我们想要的,所以经过一番查询,学习了一下大文件分割上传的方法。并且使用简单的php做服务端处理程序实现一个功能demo,供以后回顾使用。本人也是初出茅庐的前端小白,记录下各种功能的实现总结,代码有错误的地方,请多多指正。

 

1.简单文件上传

  • 普通表单上传

    表单上传是我们经常使用的功能,而且使用起来也是非常简单,我们只需要声明表单内容类型为enctype="multipart/form-data",表明表单上传文件的二进制数据。

    1.  <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方法,将接收到的文件数据,存储起来,就实现了文件上传功能了。

    1.  $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元素对象。

      1.  <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的默认行为导致数据格式或请求头信息出现问题。

      这里的contentTypeprocessData为必须项。

      1.  $('#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中的默认配置。

    1.  post_max_size = 50M
       upload_max_filesize = 50M

     

  • talk is cheap,show me the code

    • HTML

      1.  <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数据段。

      1.  $('#submitForm').on('click', function(e){
           // 阻止默认表单提交
           e.preventDefault();
           var myfile = $('#myFile')[0].files[0];
           // 定义文件标识符  
           var fileId = getFileIdentifier(myfile);
           // 数据切片
           var chunks = fileSlice(myfile);
           // 发送分割数据段
         sendChunk(fileId, chunks);
         })
    1.  ?
  • 生成文件唯一标识getFileIdentifier()

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

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

     

    • 分割方法fileSlice()

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

      1.   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列表,用于保证文件分隔符全部已经完成上传。

      1.  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进行文件的整合处理。

      1.  function makeFileIntegration(id, size){
           // 通知已传输完成
           $.post(
             "file_integration.php",
            {
               id: id,
               size: size
            },
             function(data){
               console.log(data);
            }
          );
         }
    • PHP- file_getchunk.php

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

      1.  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

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

      1.  $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才能生效。

        1.  // 获取文件断点
           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

        1.  // 上传前,请求file_integration.php接口获取数据段开始传输的位置
           var offset = getFileBreakpoint(id, chunks.length);
      • 遍历chunks发送数据段时,增加筛选逻辑

        1.   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.  // 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后,增加一个判断就可以实现

    1.  var offset = getFileBreakpoint(id, chunks.length);
       // 增加判断
       if(chunks.length === offset) {
         console.log('文件已经上传完成');
         return;
       }

    当然,这里仅仅是非常简单的处理,我们还可以使用MD5来作为文件标识符,在在服务器端使用这个标识符是否存在相同文件。

  • 3.MD5检测文件完整性。

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

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

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

    1.  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.总结

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

 

原文链接:http://www.cnblogs.com/morningclock/p/11670969.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号