Question

我找到了一个名为 RubaXa / jquery.fileapi 的有用工具，它可以切割文件并创建blob。但是在文档中缺少有关如何处理服务器上传部分的信息。页面上的示例引用了url: './ctrl.php'，但您无法在开发者页面上看到它的内容。到目前为止，我使用了这个（如下所示）客户端脚本，没有错误。文件被切片，我的firebug控制台中出现了几个帖子请求。所以它似乎工作。但是如何在服务器上处理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>

启动和设置fileuploader：

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>

Answer 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);
        }
    }
}
?>

Answer 2

你可以在这里获得源代码： https://github.com/mailru/FileAPI

服务器＆＃34;文件夹是ctrl.php和FileAPI.class.php

如何在php中使用RubaXa File API上传文件blob？

2 个答案: