1

我发现了一个名为RubaXa / jquery.fileapi 的有用工具，它可以对文件进行切片并创建 blob。但是在文档中缺少关于如何在服务器上处理上传的部分的信息。页面上的示例是指a 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>
4

2 回答 2

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);
        }
    }
}
?>
于 2014-08-12T16:33:19.963 回答
1

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

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

于 2015-01-09T20:13:44.077 回答