ZUI+H5大文件分块上传开发

前端代码

使用file.slice将文件进行分割,然后分别进行异步上传。

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

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title><%= title %></title>

  <!-- zui -->

  <link rel="stylesheet" href="http://zui.sexy/dist/css/zui.min.css" rel="external nofollow" >

 </head>

 <body>

  <div style="margin-top: 30px;">

    <form method="post" enctype="multipart/form-data">

     <div>

      <input type="file" id="fileBig">

     </div>

     <button type="submit" class="btn btn-primary">提交</button>

    </form>

  </div>

  <!-- ZUI Javascript 依赖 jQuery -->

  <script src="http://zui.sexy/assets/jquery.js"></script>

  <!-- ZUI 标准版压缩后的 JavaScript 文件 -->

  <script src="http://zui.sexy/dist/js/zui.min.js"></script>

  <script type="text/javascript">

    $('form').submit(function() {

      let file = $(":file")[0].files[0];

      let fileName = file.name;

      let fileSize = file.size;

      console.log('fileSize',fileSize);

      let blockSize = 0.9*1024*1024;

      let num = Math.ceil(fileSize/blockSize);

      let start = 0;

      let end = 0;

      for(let i=1;i<=num;i++){

        end = blockSize*i;

        if(end > fileSize){

          end = fileSize;

        }

        let block = file.slice(start,end);

        start = end;

        let fd = new FormData();

        fd.append('block',block);

        fd.append('name',fileName);

        fd.append('total',num);

        fd.append('index',i);

        $.ajax({

          url:"upload.php",

          type:"POST",

          data:fd,

          async:true,

          processData:false,

          contentType:false,

          success:(res)=>{

            console.log('res_'+i+":");

            console.log(res);

          }

        })

      }

      return false;

    });

  </script>

 </body>

</html>

后端代码

在所有的文件上传成功之后,合并生成原来的大文件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<?php

$name $_POST['name'];

$index $_POST['index'];

$total $_POST['total'];

echo "name:".$name.PHP_EOL;

echo "index:".$index.PHP_EOL;

echo "total:".$total.PHP_EOL;

move_uploaded_file($_FILES['block']['tmp_name'],'upload/'.$name."_".$index);

$list = scandir('upload');

$num count($list)-2;

echo "cur_num:".$num.PHP_EOL;

if($num == $total){

  echo "upload done".PHP_EOL;

  echo $cmd "cat upload/'{$name}_'* > upload/'{$name}'";

  shell_exec($cmd);

}