如何使用 RubaXa File API 在 php 中处理上传的文件 blob？答案

【问题标题】：How to process with RubaXa File API uploaded file blobs in php?如何使用 RubaXa File API 在 php 中处理上传的文件 blob？
【发布时间】：2014-03-21 07:31:59
【问题描述】：

我发现了一个名为 RubaXa / jquery.fileapi 的有用工具，它可以对文件进行切片并创建 blob。但是在文档中缺少关于如何在服务器上处理上传的部分的信息。页面上的示例引用了url: './ctrl.php'，但您在开发人员页面上看不到它的内容。到目前为止，我使用了这个（如下所示）客户端脚本并且没有错误。一个文件被切片，我的萤火虫控制台中出现了几个发布请求。所以它似乎工作。但是如何在服务器上处理接收到的 PHP 文件部分呢？

导入的脚本：

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script>
        window.FileAPI = {
              debug: false // debug mode
            , staticPath: 'jquery.fileapi-master/FileAPI/' // path to *.swf
        };
    </script>
    <script src="jquery.fileapi-master/FileAPI/FileAPI.min.js"></script>
    <script src="jquery.fileapi-master/jquery.fileapi.min.js"></script>

文件上传器的启动和设置：

jQuery(function ($){
        $('#uploader').fileapi({
            url: 'stash.php',
            autoUpload: true,
            accept: 'video/*',
            multiple: false, //only single file upload                
            chunkSize: .5 * FileAPI.MB //filesize of the blobs/chunks
        });
    });

HTML 文件上传“表单”：

<div id="uploader">
    <div class="js-fileapi-wrapper">
         <input type="file" name="files[]" />
    </div>
    <div data-fileapi="active.show" class="progress">
         <div data-fileapi="progress" class="progress__bar"></div>
    </div>
</div>

【问题讨论】：

标签： php jquery ajax file-upload chunks

【解决方案1】：

希望这段代码对你有帮助

<?php
/**
 * FileAPI upload controller (example)
 */


include    './FileAPI.class.php';


if( !empty($_SERVER['HTTP_ORIGIN']) ){
    // Enable CORS
    header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
    header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
    header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Range, Content-Disposition, Content-Type');
}


if( $_SERVER['REQUEST_METHOD'] == 'OPTIONS' ){
    exit;
}


if( strtoupper($_SERVER['REQUEST_METHOD']) == 'POST' ){
    $files  = FileAPI::getFiles(); // Retrieve File List
    $images = array();


    // Fetch all image-info from files list
    fetchImages($files, $images);


    // JSONP callback name
    $jsonp  = isset($_REQUEST['callback']) ? trim($_REQUEST['callback']) : null;


    // JSON-data for server response
    $json   = array(
          'images'  => $images
        , 'data'    => array('_REQUEST' => $_REQUEST, '_FILES' => $files)
    );


    // Server response: "HTTP/1.1 200 OK"
    FileAPI::makeResponse(array(
          'status' => FileAPI::OK
        , 'statusText' => 'OK'
        , 'body' => $json
    ), $jsonp);
    exit;
}




function fetchImages($files, &$images, $name = 'file'){
    if( isset($files['tmp_name']) ){
        $filename = $files['tmp_name'];
        list($mime) = explode(';', @mime_content_type($filename));

        if( strpos($mime, 'image') !== false ){
            $size = getimagesize($filename);
            $base64 = base64_encode(file_get_contents($filename));

            $images[$name] = array(
                  'width'   => $size[0]
                , 'height'  => $size[1]
                , 'mime'    => $mime
                , 'size'    => filesize($filename)
                , 'dataURL' => 'data:'. $mime .';base64,'. $base64
            );
        }
    }
    else {
        foreach( $files as $name => $file ){
            fetchImages($file, $images, $name);
        }
    }
}
?>

【讨论】：

【解决方案2】：

您可以在此处获取源代码： https://github.com/mailru/FileAPI

在“服务器”文件夹中是 ctrl.php 和 FileAPI.class.php

【讨论】：