How to upload multiple files under 1 HTTP request

Using HTML5 chunking, I could upload files with less. But the problem started when he started using several HTTP POST requests, which would slow down the computer or possibly crash. Is there anyway to split the file under one HTTP request .. so if I have 5 files, it will be only 5 HTTP request requests, although I use html5 split chunk

For example: if I upload 5 files, each file will be divided into 1 MB fragment, therefore, if the first file is 10 MB, then it will become 10 parts of a 1 MB fragment. And the problem is that each fragment will be under 1 http request, so only the first file will be 10 HTTP request. Imagine if I have 1gb files, it will become 1000 HTTP requests and slow down the computer.

This is a sample code:

        //Prepare element progress after the page load completely
        var uploaders = [];
        var totalChunks = 0;
        var progress;
        var bars;
        $(document).ready(function() {
            //progress = document.querySelector('progress');
            //bars = document.querySelector('#bars'); 
        });        

        //function for after the button is clicked, slice the file 
        //and call upload function
        function sendRequest() {       
            //clean the screen
            //bars.innerHTML = '';


            var file = document.getElementById('fileToUpload');   

            for(var i = 0; i < file.files.length; i++) {      
                var blob = file.files[i];         
                var originalFileName = blob.name;
                var filePart = 0

                const BYTES_PER_CHUNK = 10 * 1024 * 1024; // 10MB chunk sizes.
                const SIZE = blob.size;

                var start = 0;
                var end = BYTES_PER_CHUNK;

                totalChunks = Math.ceil(SIZE / BYTES_PER_CHUNK);

                while( start < SIZE ) {                    
                    if (blob.webkitSlice) {
                        //for Google Chrome
                        var chunk = blob.webkitSlice(start, end); 
                    } else if (blob.mozSlice) {
                        //for Mozilla Firefox
                        var chunk = blob.mozSlice(start, end);
                    }       

                    uploadFile(chunk, originalFileName, filePart, totalChunks, i);
                    filePart++;
                    start = end;
                    end = start + BYTES_PER_CHUNK;
                }
            }                
        }

        function uploadFile(blobFile, fileName) {
            var fd = new FormData();
            fd.append("fileToUpload", blobFile);

            var xm = $.ajax({
                url: "upload.php"+"?"+"file1="+fileName,
                type: "POST",
                data: fd,
                processData: false,
                contentType: false,
            });               
        }

        function uploadFile(blobFile, fileName, filePart, totalChunks, divBarsSelector) {
            if(filePart == 0) {
                bars = document.querySelector('#bars' + divBarsSelector);  
            }

            var progress = document.createElement('progress');
            progress.min = 0;
            progress.max = 100;
            progress.value = 0;
            bars.appendChild(progress);   

            var fd = new FormData();
            fd.append("fileToUpload", blobFile);

            var xhr = new XMLHttpRequest();                
            xhr.open("POST", "upload.php"+"?"+"file="+fileName + filePart, true);

            xhr.onload = function(e) {
                //make sure if finish progress bar at 100%
                progress.value = 100;

                //counter if everything is done using stack
                uploaders.pop();

                if (!uploaders.length) {
                    bars.appendChild(document.createElement('br'));
                    bars.appendChild(document.createTextNode('DONE :)'));
                    //mergeFile(fileName, totalChunks);
                }                  
            };

            // Listen to the upload progress for each upload.   
            xhr.upload.onprogress = function(e) {;
                if (e.lengthComputable) {
                    progress.value = (e.loaded / e.total) * 100;
                }
            };                 

            uploaders.push(xhr);
            xhr.send(fd);
        }

and the server part to receive will be upload.php

$target_path = "uploads/";
$tmp_name = $_FILES['fileToUpload']['tmp_name'];
$size = $_FILES['fileToUpload']['size'];
$name = $_FILES['fileToUpload']['name'];

$originalName = $_GET['file'];

print_r("*******************************************\n");
print_r($originalName);
print_r("\n");
print_r($_FILES);
print_r("\n");
print_r("*******************************************\n");
$target_file = $target_path . basename($name);

//Result File
$complete = $originalName;
$com = fopen("uploads/".$complete, "ab");
error_log($target_path);

if ( $com ) {
    // Read binary input stream and append it to temp file
    $in = fopen($tmp_name, "rb");
    if ( $in ) {
        while ( $buff = fread( $in, 1048576 ) ) {
            fwrite($com, $buff);
        }   
    }
    fclose($in);
    fclose($com);
}
+5
source share
3 answers

, "". , . PHP (, , *), , , , 1 . , ( XMLHttpRequest2, XMLHttpRequest2, , , ).

* , , , , php- ( php , temp, PHP , , ). ( , PHP PHP , )

, 5-25 ( , , : P) + ( , XMLHttpRequest2, ) . (, , -, , , Apple , () )

+6

Java uploaders [ JumpLoader] - " ", , . , , - : 1) , 2) (, , ), 3) ( , ).

, PHP max_upload_size. , , - .

+1

Try the following:

<script type="text/javascript">
    //Prepare element progress after the page load completely
    var uploaders = [];
    var totalChunks = 0;
    var progress;
    var bars;
    $  (document).ready(function() {
        //progress = document.querySelector('progress');
        //bars = document.querySelector('#bars');
    });        

    //function for after the button is clicked, slice the file
    //and call upload function
    function sendRequest() {
        //clean the screen
        //bars.innerHTML = '';

        var file = document.getElementById('fileToUpload');   

        for(var i = 0; i < file.files.length; i++) {
            var blob = file.files[i];
            var originalFileName = blob.name;
            var filePart = 0

            const BYTES_PER_CHUNK = 10 * 1024 * 1024; // 10MB chunk sizes.
            const SIZE = blob.size;

            var start = 0;
            var end = BYTES_PER_CHUNK;

            totalChunks = Math.ceil(SIZE / BYTES_PER_CHUNK);

            while( start < SIZE ) {
                if (blob.webkitSlice) {
                    //for Google Chrome
                    var chunk = blob.webkitSlice(start, end);
                } else if (blob.mozSlice) {
                    //for Mozilla Firefox
                    var chunk = blob.mozSlice(start, end);
                }       

                uploadFile(chunk, originalFileName, filePart, totalChunks, i);
                filePart++;
                start = end;
                end = start + BYTES_PER_CHUNK;
            }
        }
    }

    function uploadFile(blobFile, fileName) {
        var fd = new FormData();
        fd.append("fileToUpload", blobFile);

        var xm = $  .ajax({
            url: "upload.php"+"?"+"file1="+fileName,
            type: "POST",
            data: fd,
            processData: false,
            contentType: false,
        });
    }

    function uploadFile(blobFile, fileName, filePart, totalChunks, divBarsSelector) {
        if(filePart == 0) {
            bars = document.querySelector('#bars' + divBarsSelector);
        }

        var progress = document.createElement('progress');
        progress.min = 0;
        progress.max = 100;
        progress.value = 0;
        bars.appendChild(progress);   

        var fd = new FormData();
        fd.append("fileToUpload", blobFile);

        var xhr = new XMLHttpRequest();
        xhr.open("POST", "upload.php"+"?"+"file="+fileName + filePart, true);

        xhr.onload = function(e) {
            //make sure if finish progress bar at 100%
            progress.value = 100;

            //counter if everything is done using stack
            uploaders.pop();

            if (!uploaders.length) {
                bars.appendChild(document.createElement('br'));
                bars.appendChild(document.createTextNode('DONE :) '));
                //mergeFile(fileName, totalChunks);
            }
        };

        // Listen to the upload progress for each upload.
        xhr.upload.onprogress = function(e) {;
            if (e.lengthComputable) {
                progress.value = (e.loaded / e.total) * 100;
            }
        };                 

        uploaders.push(xhr);
        xhr.send(fd);
    }
</script>
0
source

All Articles