Question

我已经坚持了一个多星期了，我想我早就应该在这里询问了......我正在尝试让我的用户使用jQuery文件上传插件上传他们的视频文件。我们不想将文件保存在我们的服务器上。最终结果是使用Ooyala API将文件保存在我们的Backlot中。我尝试了各种方法，并且我成功地在Backlot中创建资产并获取我的上传URL，但我不知道如何使用URL将文件块上传到Backlot。我已经尝试过FileReader（），FormData（）等。我正在粘贴我创建资产的最后一个代码，并给了我上传网址，但没有将任何块保存到Backlot中。我想我可能会陷入我的一个AJAX调用，但我不太确定。

我一直在： 未捕获的InvalidStateError：尝试使用未使用或不再可用的对象。

以下是BlueImp的jQuery File Upload小部件的JS页面：

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="<?php print base_path() . path_to_theme() ?>/res/js/jQuery-File-Upload/js/vendor/jquery.ui.widget.js"></script>
        <script type="text/javascript" src="<?php print base_path() . path_to_theme() ?>/res/js/jQuery-File-Upload/js/jquery.iframe-transport.js"></script>
        <script type="text/javascript" src="<?php print base_path() . path_to_theme() ?>/res/js/jQuery-File-Upload/js/jquery.fileupload.js"></script>
</head>
<body>
        <input id="fileupload" type="file" accept="video/*">
                <script>
                            //var reader = FileReader();
                            var blob;
                            $('#fileupload').fileupload({
                                forceIframeTransport: true,
                                maxChunkSize: 500000,
                                type: 'POST',
                                add: function (e, data) {
                                    var goUpload = true;
                                    var ext = ['avi','flv','mkv','mov','mp4','mpg','ogm','ogv','rm','wma','wmv'];
                                    var uploadFile = data.files[0];
                                    var fileName = uploadFile.name;
                                    var fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1); 
                                    if ($.inArray( fileExtension, ext ) == -1) {
                                        alert('You must upload a video file only');
                                        goUpload = false;
                                    }
                                    if (goUpload == true) {


                                        $.post('../sites/all/themes/episcopal/parseUploadJSON.php', 'json=' + JSON.stringify(data.files[0]), function (result) {
                                            var returnJSON = $.parseJSON(result);
                                            data.filechunk = data.files[0].slice(0, 500000);
                                            data.url = returnJSON[0];
                                            //reader.onloadend = function(e) {
                                                //if (e.target.readyState == FileReader.DONE) { // DONE == 2
                                                    //data.url = returnJSON[0];

                                               // } 
                                           //} 

                                            //$.each(returnJSON, function(i, item) {
                                                //data.url = returnJSON[0];
                                                //blob = data.files[0].slice(0, 500000);
                                                //console.log(blob);
                                                //reader.readAsArrayBuffer(blob);
                                                //data.submit();
                                            //}); 
                                            data.submit();
                                        }); 
                                                                            }
                                },//end add 
                                submit: function (e, data) {
                                    console.log(data); //Seems fine
                                    //console.log($.active);
                                    $.post('../sites/all/themes/episcopal/curlTransfer.php', data, function (result) { //fails

                                        console.log(result);
                                    });

                                    return false;  
                                }
                            });
                            </script>

</body></html>

然后是parseUploadJSON.php代码，请记住我的真实代码有正确的Backlot键。我确信这一点：

<?php 

if(isset($_POST['json'])){
    include_once('OoyalaAPI.php');

    $OoyalaObj = new OoyalaApi("key", "secret",array("baseUrl"=>"https://api.ooyala.com"));

    $expires = time()+15*60; //Adding 15 minutes in seconds to the current time
    $file = json_decode($_POST['json']);

    $responseBody = array("name" => $file->name,"file_name"=> $file->name,"asset_type" => "video","file_size" => $file->size,"chunk_size" => 500000);

    $response = $OoyalaObj->post("/v2/assets",$responseBody);
    $upload_urls = $OoyalaObj->get("/v2/assets/".$response->embed_code."/uploading_urls");

    $url_json_string = "{";
    foreach($upload_urls as $key => $url){
        if($key+1 != count($upload_urls)){
            $url_json_string .= '"' . $key . '":"' . $url . '",';
        }else {
            $url_json_string .= '"' . $key . '":"' . $url . '"';
        }   
    }
    $url_json_string .= "}";
    echo $url_json_string;
}

?>

然后我有curlTransfer.php：

    <?php
echo "starting curl transfer";
echo $_POST['filechunk'] . " is the blob";
if(isset($_FILES['filechunk']) && isset($_POST['url'])){
    echo "first test passed";
    $url = $_POST['url'];
    //print_r(file_get_contents($_FILES['filechunk']));
    $content = file_get_contents($_FILES['filechunk']);
    print_r($content);
    $ch = curl_init($url);
            curl_setopt ($ch, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
            curl_setopt ($ch, CURLOPT_HTTPHEADER, Array("Content-Type: multipart/mixed"));
            curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "PUT");
            curl_setopt($ch, CURLOPT_POSTFIELDS, $content);

        try {
             //echo 'success'; 
             return httpRequest($ch);
         }catch (Exception $e){
             throw $e;
         }
}        
/****Code from Ooyala****/    

function httpRequest($ch){

    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    $response = curl_exec($ch);
    if(curl_error($ch)){
        curl_close($ch);
        return curl_error($ch);

     }

     $head=curl_getinfo($ch);
     $content = $head["content_type"];
     $code = $head["http_code"];
     curl_close($ch);
}

?>

OoyalaApi.php就在这里（我在服务器上保存了一份副本）： https://github.com/ooyala/php-v2-sdk/blob/master/OoyalaApi.php

如果代码很乱并且有很多部分被注释掉，我会提前道歉。我已经改变了这么多代码而且我无法得到它。我感谢您的所有时间和精力。

修改的

我回去尝试FileReader，因为这篇文章Send ArrayBuffer with other string in one Ajax call through jQuery对我有用，但我认为使用readAsArrayBuffer读取它更安全，现在我无法在某种情况下保存数组缓冲区块阵列...

Answer 1

我们已经在Ruby On Rails中实现了ooyala文件块上传。我们已使用整个JS文件，因为它来自此链接。

https://github.com/ooyala/backlot-ingestion-library

jQuery将文件块发送到PHP上传到Ooyala

1 个答案: