Modern image uploader

概要

スマートフォンのカメラ画像をそのままアップロードし、サーバーの容量制限（3MB制限など）やネットワーク負荷に悩まされたことはありませんか？ ブラウザ（クライアントサイド）で画像の縮小処理を行ってからアップロードを実行するJavaScriptを作ってみましょう。

これは今風の画像アップローダーを作る のサンプルコードです。

特徴

ユーザー体験の向上

• 大容量ファイルをそのまま送るよりも送信時間が短縮され、快適なアップロード体験を提供します。
• ユーザーは追加作業は必要なく大容量のファイルをそのまま指定できます。
• 純粋なJavaScriptのみで動作するため、利用者に追加のアプリやプラグインをインストールしてもらう必要はありません。

導入の柔軟性

• 画像の処理をクライアント側で行うため、サーバー側のリソースを消費しません。
• 純粋なJavaScriptであり、ReactやjQueryなどを問いません。
• サーバーへは通常の POST（画像ファイル）として送信されるため、サーバー側のコード変更を最小限に抑えて導入可能です。

主な機能

クライアントサイドでの画像リサイズ アップロード前にブラウザ上で指定サイズまで縮小します。「ファイルサイズ制限」によるエラーを未然に防ぎます。

• 複数画像の同時アップロード 複数のファイルを一度に選択し、一括で処理・アップロード可能です。

• ドラッグ＆ドロップ対応 ファイルをドロップでアップロードできます。。

• プレビュー機能 アップロードする前の画像をサムネイル形式でページ上で即座に確認できます。

• アップロード状況の可視化 アップロード処理中の画像に進捗度を表示し状況を直感的に伝えます。

• 画面回転補正対応 スマホで撮影した写真の「向き（Exif Orientation）」を解析し、クライアント側で正しい向きに回転補正してからアップロードします。

プログラムの学習者向け

実装手順の解説は、次のQiitaをご覧ください。 今風の画像アップローダーを作る

最終結果のみが欲しい場合

本リポジトリの 2-9ディレクトリにあるコードを使用してください。これが最終的な完成形となります。

ライセンス

License を参照してください。