ローカル画像のプレビューの HTML5 実装 _html5 チュートリアルのスキル

問題の説明
HTML に画像アップロード コントロールがあるとします。

コードをコピー

コードは次のとおりです。次のように:

accept="image/*" は非常に重要であることに注意してください。アップロードする画像がモバイル端末のシステムのポップアップ ウィンドウの選択タイプやその他の問題に関連することを指定します。必ず追加してください。
それでは、フォームをサーバーに送信する前に画像の内容を読み取る方法はあるのでしょうか?
単純なようで、すべてクライアントファイルなのでできるはずですが、以前は本当に良い方法がありませんでしたが、HTML5の登場以来、この機能が復活し、この機能はFileReaderを通じて簡単に実現できます。
例で問題を説明します

コードをコピーします

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

$(function () {
$('#upload_image').change(function(event) {
// この
var ファイルに基づいてファイルの HTML5 js オブジェクトを取得します= events.target.files, file;
if (files && files.length > 0) {
// 現在アップロードされているファイルを取得します
file = files[0];これが何であるかをコンソールで確認してください。 オブジェクトとは何ですか?
console.log(file);
// 次に、ファイル サイズの検証などのアクションを実行できます。
if(file.size > 1024 * 1024) * 2) {
alert('画像サイズは 2MB を超えることはできません!');
return
}
// !!!!!!
// 以下がキーです、このファイル オブジェクトを通じて、利用可能な画像 URL を生成します
// ウィンドウ URL ツールを取得します
var URL = window.URL || window.webkitURL
// ファイルを通じてターゲット URL を生成します
var imgURL = URL.createObjectURL(file );
// この URL を使用して を生成し、それを表示します
$('body').append($('') ('src', imgURL));
// メモリ内のこの URL のサーバーを解放するには、次の文を使用します。
// URL.revokeObjectURL(imgURL); 🎜>}
})
});
簡単な説明

簡単に言うと、全体の操作設計は次のとおりです。

1. の変更イベントを通じてイベントをトリガーし、イベント オブジェクトを取得します。 >2. イベント オブジェクトを通じてアップロードされたファイルの js オブジェクト ファイルを取得します。

3. この URL を使用します。 >5.* リリース この URL のサーバー
の重要な点:
1. 同じファイルに対して、URL.createObjectURL が呼び出されるたびに、異なる URL が再生成されます。 2. URL を呼び出します。.createObjectURL を実行すると、ブラウザは URL を提供するためにメモリ内のスペースを自動的に開きます。これは、URL が正常に要求されることを意味します。3. URL.revokeObjectURL(imgURL) が呼び出されると、サーバーはそれをオフにし、この URL を再度リクエストすると 404 が表示されます。
4. これはすべてクライアントの問題であり、サーバーは、選択した画像も含めて何も知りません。 imgURL はおそらく次のようになります: blob:http://localhost:8000/22cc97d5-5e46-4d87-9df4-c3e8c0aa72bb