[support]ダイレクトフォームアップロードの利用例

機能説明

2016.2.24（水）

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

&lt;?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}";
?&gt;

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

&lt;script type="text/javascript"&gt;
$( document ).ready( function(){
    $('#testForm').submit(function(event) {
        event.preventDefault();
        var $form = $(this);
        var postData = new FormData($("#testForm").get(0));
        postData.append( "accesskey", "&lt;?php echo $accesskey ?&gt;" );
        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
        });
    });
});
&lt;/script&gt;

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

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

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

<< 安定した動画配信なら「millvi（ミルビィ）」へおまかせ >>

導入実績700社を誇る、国産のクラウド型動画配信システム「millvi(ミルビィ）」。 ITに詳しくない方にも分かりやすいUI・UXや、日本語でのサポート対応があり、ご導入が初めての方にも安心してご利用いただけます。会員向けの動画共有ポータルサイト「millviポータル」や動画販売ECサイト「millviポータルEC」など、さまざまなニーズにご対応。詳しくは、サービスページまで。

Pepper向け動画PRアプリ　pemota（ペモタ）を蔦屋家電様にてご採用頂きました。

気になるニュース　2016年10月

ミルビィブログ