How do we access file blocks on a server?

I am using Blueimp File Uploader .

When uploading files larger than maxChunkSize, how can we access each downloaded file blob separately on the server?

My problem is that I need to forward the downloaded files in separate drops to another server using the backend api.

So far, looking at the wiki , for 1 mb pieces, I have added the following to js:

$('#fileupload').fileupload({
    url: 'server/php/',
    maxChunkSize: 1000000 // 1 MB
});

but after the download is complete, I see the complete merged file on the server:

server/php/files

How do we access individual blocks on the server?

I did not make any changes to the default file server/php/index.php:

error_reporting(E_ALL | E_STRICT);
require('UploadHandler.php');
$upload_handler = new UploadHandler();

and the default UploadHandler class in

server/php/UploadHandler.php

(https://github.com/blueimp/jQuery-File-Upload/blob/master/server/php/UploadHandler.php). .


fileuploadchunkdone, , , , .

$('#fileupload').fileupload({
    url: 'server/php/',
    maxChunkSize: 1000000 // 1 MB
})
.on('fileuploadchunkdone', function (e, data) {
    console.log('chunkdone')
    console.log(e)
    console.log(data)
});
+4
1

2

  • javascript chunking (split of some bytes)
  • PHP . : FILE_APPEND

, chunk . ?

  • , , fileuploadchunksend
  • , , fileuploadchunkdone

, , chunk, .

html https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
<style>
.bar {
    height: 18px;
    background: green;
}
</style>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .bar').css(
                'width',
                progress + '%'
            );
            //console.log(progress);
        },
        maxChunkSize: 50000 // i prefer 50 Kb, because my file is only 190Kb (4 step)
    })
    .on('fileuploadchunksend', function (e, data) {
        console.log('send');
    })
    .on('fileuploadchunkdone', function (e, data) {
        console.log('done');
        console.log(data.result);
        //forceerror; wrong javascript function to make error so file upload will stopped. and we can start debugging
    })
    .on('fileuploadchunkfail', function (e, data) {
        console.log('fail');
        console.log(data);
    })
    .on('fileuploadchunkalways', function (e, data) {
        console.log('always');
    });
});
</script>
</body> 
</html>

php: server/php/UploadHandler.php

1061

protected function handle_file_upload($uploaded_file, $name, $size, $type, $error,
            $index = null, $content_range = null) {
....
            if ($uploaded_file && is_uploaded_file($uploaded_file)) {
                // multipart/formdata uploads (POST method uploads)
                $path_parts = pathinfo($file_path); //new
                $chunkFileName = $path_parts['dirname'].'/'.$path_parts['filename'].'_'. $content_range[1]."_". $content_range[2].".".$path_parts['extension'];//new
                if ($append_file) {
                    file_put_contents($chunkFileName,  file_get_contents($uploaded_file));//new
                    file_put_contents(
                        $file_path,
                        fopen($uploaded_file, 'r'),
                        FILE_APPEND
                    );
                } else {
                    file_put_contents($chunkFileName,  file_get_contents($uploaded_file));//new
                    move_uploaded_file($uploaded_file, $file_path);
                }
            } else {
                // Non-multipart uploads (PUT method support)
....

: https://pastebin.com/3AsHbkqQ ( 4 , )

. 196kb dummy.png, 50kb chunk. ( 4 )

dummy.png: 5 :

  • dummy.png//
  • dummy_0_49999.png//
  • dummy_50000_99999.png//
  • dummy_100000_149999.png//
  • dummy_150000_196064.png//

-

: , , plupload blueimp. .

+3

Source: https://habr.com/ru/post/1689785/


All Articles