フォーラムやポストバーでは、多くの写真を共有する必要があることがよくあります。写真をアップロードする方法は、写真を中央サーバーにアップロードし、静的画像サーバーに転送することです。この記事では、Pluploadを使用してアップロードプロセスを最適化し、サーバーをバイパスしてバッチ内の写真をYouPai Cloudに直接アップロードする方法を紹介します。この記事では、次の重要なポイントについて説明します。
コードコピーは次のとおりです。
Pluploadライブラリ
写真のローカル圧縮
複数の選択写真
サーバーをバイパスし、YouPaiyunに直接写真をアップロードします
HTTPフォームAPIを使用します
Plupload構成
Pluploadライブラリ
Pluploadは非常にリッチな画像アップロードプラグインです。低バージョンブラウザーは、Flash/Silverlight/HTML4を介してバッチアップロードをサポートできますが、Hiversion Browserでは、HTML5インターフェイスを使用してアップロードすることを優先されます。これらはすべて自動的であり、使用するのが非常に便利だと言えます！第二に、Pluploadは、クライアントに画像を圧縮したり、ドラッグ＆ドロップに直接アップロードするなどの機能もサポートしています。詳細については、公式Webサイトにアクセスして詳細情報をご覧ください。
ここでは、コアAPIのみを使用して、ファイルを導入するだけです。
コードコピーは次のとおりです。
<スクリプトsrc = "lib/plupload-2.1.2/js/plupload.full.min.js"> </script>
オフィシャルが提供するコアAPIの例は非常に簡単です。http：//www.plupload.com/examples/coreで直接表示できます。コアAPIを理解するのに困難はありません。助けが必要な場合は、この記事の後半で質問することができます。
写真のローカル圧縮
一般に、Webページで閲覧する写真の品質は高くありません。私が高校でPSを勉強していたとき、教師はオンラインの写真の解決策は72であり、印刷された写真は300でなければならないと言ったことを覚えています。したがって、ユーザーが大きな写真をアップロードするときは、ユーザーのクライアントに画像をローカルに圧縮し、圧縮された小さな画像をアップロードする方が良いです。
画像の局所圧縮関数はPluploadでサポートされており、初期化時にサイズ変更パラメーターを渡すだけです。その中で、幅と高さは実際の状況に応じて設定でき、品質は比較的重要なパラメーターです。名前が示すように、値が小さくなるほど、画像は小さくなりますが、ディスプレイの品質は悪化します。これを自分で計量する必要があります。
コードコピーは次のとおりです。
{
「サイズ」：{
「幅」：200、
「高さ」：200、
「品質」：70
}
}
複数の選択写真
写真のバッチアップロードの前提条件の1つは、複数の写真を選択する機能です。複数選択ファイルは、HTML5の標準機能です。次の方法でマルチセレクトモードを有効にすることができます。
コードコピーは次のとおりです。
<form action = "xxx">
画像を選択：<入力タイプ= "ファイル" name = "img"倍数> <！ - ここでは倍数が重要です！ - >
<入力型= "submit">
</form>
jquery-file-uploadのブラウザサポートで複数のファイルの選択によると、IEはIE10までHTML5機能をサポートし始めたばかりであるため、低いバージョンブラウザーの複数選択画像をサポートするためにフラッシュの魔法のパワーを使用する必要があります。幸いなことに、Pluploadはこれを行うのに役立ち、このスイッチはデフォルトでオンになります。マルチ選択画像を使用する必要がないと思われる場合は、multi_selection：falseを設定してこの機能をオフにすることができます。
サーバーをバイパスし、YouPaiyunに直接写真をアップロードします
youpaiyunは、HTTPフォームAPIを提供します。このインターフェイスを介して、独自のサーバーを介して転送することなく、ブラウザから画像をアップロードするリクエストを直接開始できます。これにより、オーバーヘッドが大幅に削減されます。
HTTPフォームAPIを使用します
このインターフェイスを使用して、フォームをyoupaiyunに送信する必要があります。このフォームには、アップロードするファイルが含まれており、ポリシーと署名も含める必要があります。ポリシーは、保存パス、ファイルタイプ、前処理結果などのアップロードリクエストに関連するパラメーターを転送するために使用され、アップロードリクエストの付与時間なども含まれます。署名はセキュリティ検証に使用されます。
デモンストレーションの利便性のために、JavaScriptを使用して、ここでポリシーと署名を生成します。ただし、実際に使用すると、セキュリティ上の理由から、サーバー側でこのプロセスを完了してください。次のコードは、主に公式テストアカウントを使用して、公式デモに基づいて変更されています。これら2つのパラメーターの特定の生成方法については、公式ドキュメントhttp://docs.upyun.com/api/form_api/を参照してください。
コードコピーは次のとおりです。
var options = {
「バケツ」：「デモンストレーション」、
'Save-Key'： '/test/filename.txt'、
「有効期限」：math.floor（new date（）。gettime（） / 1000） + 86400
};
//パラメーターをもっと参照してください：http：//docs.upyun.com/api/form_api/#form apiインターフェイス紹介
var policy = window.btoa（json.stringify（options））;
// upyunユーザー管理バックエンドからフォームAPIを取得します
var form_api_secret = '1+jy2zqd5uvfw6hq8eesyqo50wo =';
//署名を計算します
var signature = md5（policy + '＆' + form_api_secret）;
Plupload構成
YouPaiyunのHTTPフォームAPIでPluploadを機能させる方法は、私に頭痛を与えました。 Pluploadを表示するドキュメントでは、予想外の発見により、私は夜明けを見ました。 Amazon S3へのリンクのアップロードが私を惹きつけました。 Amazon S3のフルネームはAmazon Simple Storage Serviceであり、それが提供するクラウドストレージサービスは、Youpaiyunのクラウドストレージサービスとほぼ類似しています。
したがって、この記事のブラウザ構成の紹介に基づいて、YouPaiyunにアップロードするために必要な構成を見つけました。実際、主に2つのパラメーターURLとMultiPART_PARAMSを構成するのは非常に簡単です。 options.bucket、ポリシー、および署名の例は、前のセクションの値を計算するために直接使用されます。
コードコピーは次のとおりです。
var uploader = new Plupload.uploader（{
...
url： 'http://v0.api.upyun.com/' + options.bucket、
multipart_params：{
'filename'： '$ {filename}'、//これを追加して、ランタイム全体で一貫性を維持する
'Content-Type'： ''
「ポリシー」：ポリシー、
「署名」：署名、
}、
...
}）;
要約します
このようにして、私たちはついに、プルプロードを介してサーバーをバイパスし、youpaiyunにバッチで写真をアップロードすることに気付きました。 Pluploadは本当に非常に強力なライブラリですが、商業用に充電することができます。詳細については、公式ウェブサイトにアクセスしてください！
とても簡単ではありませんか？主なことは、アイデアが非常に優れており、学ぶ価値があるということです。ご質問がある場合は、私にメッセージを残してください。誰もが一緒に進歩します