jq php slicing large file uploads implementation of the core code

front end

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>upload</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <style>
        #jindu{height: 40px;width: 0;background: #666;text-align: center;line-height: 40px;color: #fff}
    </style>
</head>
<body>
    <input type="file" name="file" id="file">
    <button id="upload" onClick="upload()">upload</button>
    <div id="jindu"></div>
    <file upload sections, each 4MB>the p-</ P > 
    < Script type = "text / JavaScript" > 
        var bytesPerPiece =  1024  *  1024 * . 4 ; // for each slice file size as 4MB. 
        Var totalPieces;
         var Jindu = document.getElementById ( " Jindu " );
 
        / / transmission request 
        function Upload () {
             var BLOB = document.getElementById ( " File " ) .files [ 0 ];
             var Start=  0 ;
             var End;
             var index =  0 ;
             var filesize = blob.size;
             var filename = blob.name; 

            // calculate the total number of file sections 
            totalPieces = Math.ceil (filesize / bytesPerPiece);
             function doup () { 
                End = Start + bytesPerPiece;
                 var the chunk = blob.slice (Start, End); // cutting file     
                var formData = new FormData();
                formData.append("file", chunk, filename);
                formData.append("index", index);
                $.ajax({
                    url: './upload.php',
                    type: 'POST',
                    cache: false,
                    data: formData,
                    processData: false,
                    contentType: false,
                    success:function(){

                        start = end;
                        if(start < filesize){
                             index++;
                             var jindusize = ((index+1)/totalPieces)*100;
                             jindu.style.width=jindusize+"%";
                             jindu.innerHTML = Math.floor(jindusize)+"%";
                            doup();
                        }else{
                            jindu.style.width="100%";
                            jindu.innerHTML = "100%";
                        }
                        
                    }
                });

           }
           doup();
        }
    </script>
</body>
</html>

rear end

<?php
header('Access-Control-Allow-Origin:*');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
$file = $_FILES['file'];
$filename = $file['name'];
file_put_contents("./upload/".mb_convert_encoding($filename,"GBK","UTF-8"), file_get_contents($file['tmp_name']), FILE_APPEND);

Only the core functions of the code, not perfect, we need to modify according to their own business use

jq php slicing large file uploads implementation of the core code

Guess you like