jQuery發送文件塊到PHP上傳到Ooyala

我一直堅持這一個多星期，我想我早就要求在這裏..我試圖讓我的用戶上傳他們的視頻文件使用jQuery文件上傳插件。我們不想將文件保存在我們的服務器上。最終的結果是使用Ooyala API將文件保存在我們的Backlot中。我嘗試了各種方法，併成功地在Backlot中創建資產並獲取我的上傳URL，但我不知道如何使用URL將文件塊上傳到Backlot。我嘗試了FileReader（），FormData（）等。我粘貼了創建資產的最後一個代碼，並給了我上傳URL，但沒有將任何塊保存到Backlot中。我想我可能會陷入我的一個AJAX調用中，但我不太確定。jQuery發送文件塊到PHP上傳到Ooyala

我一直在： 未捕獲InvalidStateError：試圖使用一個不是或不再可用的對象。

這裏是我的網頁與BlueImp的JS的jQuery的文件上傳插件：

<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代碼，請記住，我真正的代碼有合適的外景鍵。我相信這個：

<?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，現在我有麻煩保存數組緩衝區塊讀在某種陣列中......

來源

2013-11-02 elshae