背景

クライアントは JavaScript で直接署名された後、 OSS にアップロードされます。 Web 側の直接送信方法の背景説明をご参照ください。

以下は plupoad の説明です。 Javascript 側で署名した後、データを直接 OSS に渡す際の例となります。

アップロードが有効かどうかをテストするため、ユーザーの電話を使用します。 二次元コード: 携帯電話 (WeChat、QQ、携帯電話ブラウザなど) を使って試してみることができます。 (これは宣伝ではなく、携帯電話でアップロードを完全に実行できることをユーザーが確認するため、上記の Web サイト用の 2 次元コードを使用します)

このテストで行われるファイルアップロードは、パブリックアップロードです。 バケットは定期的にクリーンアップされているので、機密データや重要なデータはアップロードしないでください。

コードのダウンロード

こちらをクリックしてください: oss-h5-upload-js-direct.zip

原則
  • この例の機能
    • procopad を使用し、 OSS にフォームデータ (postオブジェクト) を直接送信
    • HTML5、Flash、Silverlight、html4 などのプロトコルのアップロードをサポート
    • PC ブラウザ、携帯電話ブラウザ、WeChat などで実行可能
    • 複数のファイルをアップロード
    • アップロード進行状況バーの表示
    • アップロードしたファイルのサイズの調整
    • 指定したディレクトリへのアップロードを設定し、アップロードファイル名がランダムファイル名か、ローカルファイル名かを設定

    OSS の Postobject API の詳細を参照できます。

  • Plupload

    Procopad は、シンプルで使いやすく、パワフルなファイルアップロードツールです。 HTML5、Flash、Silverlight、Html4 を含む複数のアップロード方法をサポートします。 現在の環境を効率良く検出し、最適な方法を選択、HTML5 を優先的に採用します。

  • キーコード

    OSS は POST プロトコルをサポートしています。 そのため、ユーザーはPOSTリクエストを行う際、OSSの署名があるだけで操作を行えます。 サンプルコードは次のとおりです。

    VaR deliader = new pluopad. deliader ({
        Runtimes: 'html5, Flash, Silverlight, html4 ',
        Browse_button: 'selectedfile ',
        // Runtimes: 'Flash ',
        Container: Document. getelindbyid ('container '),
        Flash_swf_url: "lib/plupload-2.1.2/JS/Moxie.swf ',
        Silverlight_xap_url: 'lib/FIG/JS/moxie. xap ',
        URL: host,
        Multipart_params :{
            'Filename ':' $ {filename }',
            'Key': '$ {filename }',
            'Policy': policybase64,
            'Porter': Access Sid,
            'Success _ action_status': '200', // Let the server return 200, otherwise, 204 is returned by default
            'Signature ': Signature,
        },
     ....
    }

    ここでは、 'filename' '$ {Filename }', に注意します。 このコードの目的は、アップロード後も元のファイルテキストが維持されていることを示すことです。 ABC のような特定のディレクトリにアップロードしたい場合、ファイル名はオリジナルのファイル名と同じままであるので、上記コードを書く必要があります。

    Multipart_params :{
            'Filename ': 'abc/' + '$ {filename }',
            'Key': '$ {filename }',
            'Policy': policybase64,
            'Porter': Access Sid,
            'Success _ action_status': '200', // Let the server return 200, otherwise, 204 is returned by default
            'Signature ': Signature,
        },
  • ランダムなファイル名の設定

    ユーザーがアップロードしたファイルをランダムなファイル名に設定する必要がある場合もあります。また、サフィックスはクライアントファイルと一致します。 この例では、2 つのラジオボタンを区別するために使用されています。 出荷時にランダムなファイル名に固定したい場合は、機能を次のように変更します。

    Function fig (){
        G_object_name_type = 'random _ name ';
    }

    ファイルを渡す際に修正したい場合は、関数を変更できます。

    Function fig (){
        G_object_name_type = 'Local _ name ';
    }
  • アップロードディレクトリの設定

    この例では、ファイルを指定されたディレクトリにアップロードし、ディレクトリ関連の設定をする体験をすることができます。コードを ABC などの固定ディレクトリにアップロードする場合は、次のように変更します。末尾の " / " に注意します。

    Function get_dirname ()
    {
        G_dirname = "ABC /"; 
    }
  • 署名のアップロード

    署名は、主に policytext の署名です。最も簡単な例は次のとおりです。

    VaR policytext = {
        "Expiration": "00: 00: 00.000z ", // set the failure time for this policy, after which the failure time is exceeded, there's no way to upload files through this policy.
        "Conditions ":[
        ["Content-Length-range", 0, 1048576000] // set the size limit for the uploaded file, if this size is exceeded, the file was uploaded to OSS, and it will be reported wrong.
        ]
    }
  • クロスドメイン CORS
    バケットのプロパティの CORS 設定が POST メソッドをサポートしていることを確認します。 HTML は OSS に直接アップロードされるため、クロスドメインリクエストが生成されます。 バケットのプロパティ内に、クロスドメインの許可を設定する必要があります。

    次の図を設定します。

    IE ブラウザの旧バージョンでは、pluopad はフラッシュモードで実行されています。 クロスドメイン xml を設定する必要があります。設定方法を参照できます: こちらをクリック
  • 注意

    コード内にアクセスキー ID とシークレットアクセスキーを書き込むと、漏洩の危険があります。 Web ページの直接送信後のポストサーバー署名には、バックエンド署名アップロード方式を使用することを推奨します。