ミルビィブログ

ミルビィの機能利用例について、
今回はAJAXタイプのダイレクトフォームアップロードの利用例を取り上げます。
ダイレクトフォームアップロードについては下記サポートサイトをご参照ください。
http://support.miovp.com/direct_form_upload.html
下記にAJAXタイプを利用した単純なサンプルを示します。
PHP部

<?php
$clientid = "CLIENTID";
$id_user = X;
$expire = time() + (30 * 60 * 60);
$secretkey = "SECRETKEY";
$sign = sha1("{$clientid}/{$id_user}/{$expire}/{$secretkey}");
$accesskey = "v1,{$clientid},{$id_user},{$expire},{$sign}";
?>

サポートサイトにもあるAccesskey発行手順です。
secretkey が含まれるためPHPにて記載しております。
注意点としては id_user はユーザー名ではなく、
動画登録権限を持ったユーザーのIDを指定してください。
Javascript部

<script type="text/javascript">
$( document ).ready( function(){
    $('#testForm').submit(function(event) {
        event.preventDefault();
        var $form = $(this);
        var postData = new FormData($("#testForm").get(0));
        postData.append( "accesskey", "<?php echo $accesskey ?>" );
        postData.append( "parent_id_contents", "1" );
        postData.append( "common_id_recipe", "1" );
        postData.append( "common_pc_nt", "1" );
        postData.append( "common_sp_nt", "1" );
        postData.append( "name", "movie_title" );
        $.ajax({ // 送信
            url: $form.attr('action'),
            type: $form.attr('method'),
            dataType: "json",
            data: postData,
            processData: false,
            contentType: false
        });
    });
});
</script>

jQueryを利用しているため、予めjQueryを読み込んでいるものとします。
下記HTMLフォームにて受け取ったファイルと共に
postDataへと必要なクエリを入力しています。
ajaxを利用し送信しています。
HTML部

<form id="testForm" method="post" enctype="multipart/form-data" action="https://ccs.miovp.com/create_video" >
    <input type="file" name="file" />
    <button>送信</button>
</form>

単純なフォームにてファイルを受け取ります。
受け取ったファイルを上記jQueryにて必要な情報と共に送信しています。
おおまかな流れとして
– ファイル受け取り
– json配列の作成(+phpでのaccesskey発行)
– ajaxでの送信
を行っています。
適宜必要なエラー処理などを加えることで簡単なアップロードフォームが作成できます。
※ 記事投稿時点でのサンプルのため、常に動作を保証するものではありません。