How do we access file blobs in the server?

Refresh

November 2018

Views

178 time

4

I am using Blueimp File Uploader.

While uploading files larger than the maxChunkSize, how do we access each uploaded file blobs separately in the server ?

My issue is that I need to forward the uploaded files in separate blobs to a different server using a backend api.

So far, looking at wiki, for chunks of 1 mb, I have added the following in the js :

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

but after upload is completed, I see the full merged file in the server :

server/php/files

How do we access the individual blobs on the server ?

I have not done any changes in 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). File is too big to be placed here.


I tried adding fileuploadchunkdone option, but am unsure, how do we access the file blobs in the server -- that is if it is the right way to do it.

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

1 answers

3

отрывы загрузки имеет 2 требования

  1. Javascript для отрывов (раскол определенного байта) файла
  2. PHP для сохранения и слияния файлов. обычно используют: FILE_APPEND

я не знаю, какой файл кусок вы хотите получить. в клиенте или на сервере?

  • если вы хотите, чтобы получить кусок, который будет отправлен, вам нужно проверить fileuploadchunksend
  • если вы хотите, чтобы получить кусок, который закончил загружен, вам нужно проверить fileuploadchunkdone

Из Вашего названия вопроса, я предположу , что вам нужно , чтобы получить чанку файл , который уже загруженную на сервере.

так что давайте мы используем базовый 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 кусок. (Это будет обрабатываться в 4 стадии)

после загрузки файла dummy.png: теперь вы получите 5 файлов:

  1. dummy.png // полный файл
  2. dummy_0_49999.png // первый кусок
  3. dummy_50000_99999.png // второй кусок
  4. dummy_100000_149999.png // третий кусок
  5. dummy_150000_196064.png // последний кусок

Затем вы можете сделать что-нибудь с этим куском

Примечание : из моего опыта , пожалуйста , перейти на plupload используя вместо blueimp. Вы можете прочитать мой комментарий ниже ваш вопрос.