• Ajax大文件切割上传


    1问:在不更改php.ini中post_max_size的情况下怎么实现大文件的上?

      答把大文件切割成许多小块,分块上传,传完后,重新合并成大文件即可。

    2问:怎么切割?

      答:用html5中的file API,这个API继承自Blob对象,Blob中有slice方法,可以截取二进制对象的一部分,实现切割大文件的效果。

    3问:具体思路呢?

      答:截取10M上传,判断是否截取完毕

        

    while 还有数据{
          截取,
         Ajax上传            
    }
     1 <script type="text/javascript">
     2 unction sendfile() {
     3     const LENGTH = 10 * 1024 * 1024;
     4     var sta = 0;
     5     var end = sta + LENGTH;
     6     var blob = null;
     7     var fd = null;
     8 
     9     /*
    10         xhr 对象
    11     */
    12     var xhr = null;
    13 
    14     var mov = document.getElementsByName('mov')[0].files[0];
    15     //console.log(mov);return;
    16     
    17     var totalsize = mov.size;
    18     var percent = 0;
    19 
    20     while(sta < totalsize) {
    21         blob = mov.slice(sta,end);
    22         fd = new FormData();
    23         fd.append('part',blob);
    24 
    25         xhr = new XMLHttpRequest();
    26         xhr.open('POST','06-sliceup.php',false);
    27 
    28         xhr.send(fd);
    29 
    30         sta = end;
    31         end = sta + LENGTH; 
    32 
    33         percent = 100 * end / totalsize;
    34         if(percent > 100) {
    35             percent = 100;
    36         }
    37         document.getElementById('bar').style.width = percent + '%';
    38         document.getElementById('bar').innerHTML = parseInt(percent) + '%';
    39     }
    40 
    41 }
    42 
    43 
    44 </script>

    html页面

    </head>
        <body>
            <h1>html5大文件切割上传</h1>
            <div id="progress">
                <div id="bar"></div>
            </div>
            <input type="file" name="mov" onchange="sendfile();" />
        </body>
    </html>
    

      

    后台要有个php页面,把文件接收并合并起来

    1 if(!file_exists('./upload/hhr.mov')) {
    2     move_uploaded_file($_FILES['part']['tmp_name'],'./upload/hhr.mov');
    3 } else {
    4     file_put_contents('./upload/hhr.mov',file_get_contents($_FILES['part']['tmp_name']),FILE_APPEND);
    5 }
    6 
    7 echo 'ok';
  • 相关阅读:
    HDU 1075 What Are You Talking About(字典树)
    HDU 1075 What Are You Talking About (stl之map映射)
    HDU 1247 Hat’s Words(字典树活用)
    字典树HihoCoder
    HDU 1277全文检索(字典树)
    HDU 3294 Girls' research(manachar模板题)
    HDU 3294 Girls' research(manachar模板题)
    HDU 4763 Theme Section(KMP灵活应用)
    Ordering Tasks UVA
    Abbott's Revenge UVA
  • 原文地址:https://www.cnblogs.com/a2762/p/4106995.html
Copyright © 2020-2023  润新知