Alibaba Cloud Storage OSS への HTML ダイレクト フォーム転送 example_html/css_WEB-ITnose

目的

このチュートリアルの内容は、HTML フォームを送信して OSS に直接アップロードする方法に関する 3 つの例を紹介することです

最初の例: JS で直接署名し、フォームを直接アップロードする方法を説明しますOSS への送信

2 番目の例: バックエンド PHP から署名を取得する方法を説明し、フォームを OSS に直接アップロードする

3 番目の例: バックエンド PHP から署名を取得する方法を説明し、アップロード後に折り返し電話します。次に、フォームは OSS に直接アップロードされ、OSS はアプリケーション サーバーにコールバックして、それをユーザーに返します。

背景

OSS を使用するすべてのユーザーはアップロードを使用します。 APP 内の一部の h5 ページを含む Web ページのアップロードであるため、多くの人が使用する方法は、ユーザーがブラウザ/APP でアプリケーション サーバーにアップロードし、アプリケーション サーバーがファイルをアップロードするというものです。 OSS にファイルを保存します。

この方法には 3 つの欠点があります。

まず、アップロードが遅い。最初にアプリケーション サーバーにアップロードされ、次に OSS にアップロードされるため、ネットワーク送信が 2 倍になり、OSS は BGP 帯域幅を使用します。各所の業務スピード。

2 番目: スケーラビリティが低い。後続のユーザーが増えると、アプリケーション サーバーがボトルネックになります。

3 番目: OSS アップロード トラフィックが無料であるため、コストが高くなります。データが OSS に直接送信される場合、データはアプリケーション サーバーを経由しません。これにより、いくつかのアプリケーション サーバーが節約されます。

改善案 1: クライアントは JS で直接署名し、OSS にアップロードします

Plupload を導入し、JS 側で署名して OSS サンプルにデータを渡します

サンプル: http://oss-demo.aliyuncs.com/oss-h5-upload-js-php/index.html

QR コード: 携帯電話でスキャンできます (WeChat、QQ、モバイル ブラウザーなど) .) スイープ

この例の機能

1. Plupload を使用して、フォーム データ (つまり、PostObject) を OSS に直接追加します

2. HTML5、Flash、Silverlight、HTML4 およびその他のプロトコルをサポートします 3 PC ブラウザ、モバイル ブラウザ、WeChat などで実行できます

4. 複数のファイルをアップロードすることを選択できます

5. アップロードの進行状況バーを表示します

6. アップロードされたファイルのサイズを制御できます

OSSのPostObject API 詳細は参考にしてください(わからなくても大丈夫です):

https://docs.aliyun.com/#/pub/oss/api-reference/object&PostObject

plupload

plupload はシンプルで使いやすく機能的で、複数のアップロード方法 (html5、flash、silverlight、html4) やその他の方法を備えており、現在の環境をインテリジェントに検出します

最適なものを選択しますメソッドを選択し、Html5 を優先するため、現在のブラウザーを使用するかどうかを心配する必要はありません。どのメソッドをアップロードするかは、plupload が決定するのに役立ちます。

キーコード

OSS は POST プロトコルをネイティブにサポートしているためです。したがって、POST リクエストを送信するときに plupload に OSS 署名を含める必要があるだけです。

コアコードは次のとおりです:

var uploader = new plupload.Uploader({    runtimes : 'html5,flash,silverlight,html4',    browse_button : 'selectfiles',    //runtimes : 'flash',    container: document.getElementById('container'),    flash_swf_url : 'lib/plupload-2.1.2/js/Moxie.swf',    silverlight_xap_url : 'lib/plupload-2.1.2/js/Moxie.xap',    url : host,    multipart_params: {        'Filename': '${filename}',        'key' : '${filename}',        'policy': policyBase64,        'OSSAccessKeyId': accessid,        'success_action_status' : '200', //让服务端返回200,不然，默认会返回204        'signature': signature,    },　....}

署名は主にポリシーテキストに署名します。最も単純な例は次のとおりです:

var policyText = {    "expiration": "2020-01-01T12:00:00.000Z", //       设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了    "conditions": [    ["content-length-range", 0, 1048576000] // 设置上传文件的大小限制,如果超过了这个大小，文件上传到OSS会报错的    ]}

Cors (クロスドメインアクセス)

注: バケット属性の Cors 設定が POST メソッドをサポートしていることを確認する必要がある場合。この HTML は OSS に直接アップロードされるため、クロスドメイン リクエストが発生します。クロスドメイン権限は、OSS コンソールで設定できるバケット属性で設定する必要があります。
以下のように設定します:

コードのダウンロード

http://files.cnblogs.com/files/ossteam/oss- h5-upload-js-direct.tar.gz