HTML5 はローカル画像のプレビューを実装します

この記事では、ローカル画像のプレビューの HTML5 実装に関する関連情報を主に紹介します。必要な友人は参照してください。

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

コードをコピーします。 コードは次のとおりです:

<input id="upload_image" type="file" name="image" accept="image/*" />

この accept="image/*" は、モバイル端末では、システムのポップアップ ウィンドウの選択タイプに関連することを指定するため、非常に重要であることに注意してください。などの問題があるので、必ず追加してください。

それでは、フォームをサーバーに送信する前に画像の内容を読み取る方法はあるのでしょうか?

単純なようで、すべてクライアント ファイルなので、できるはずですが、以前は本当に良い方法がありませんでしたが、HTML5 の登場以降、この機能が復活し、この機能は FileReader を介して簡単に実現できます。

例で問題を説明します

コードをコピーします

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

$(function() { 
$('#upload_image').change(function(event) { 
// 根据这个 <input> 获取文件的 HTML5 js 对象 
var files = event.target.files, file; 
if (files && files.length > 0) { 
// 获取目前上传的文件 
file = files[0]; 
// 来在控制台看看到底这个对象是什么 
console.log(file); 
// 那么我们可以做一下诸如文件大小校验的动作 
if(file.size > 1024 * 1024 * 2) { 
alert(&#39;图片大小不能超过 2MB!&#39;); 
return false; 
} 
// !!!!!! 
// 下面是关键的关键，通过这个 file 对象生成一个可用的图像 URL 
// 获取 window 的 URL 工具 
var URL = window.URL || window.webkitURL; 
// 通过 file 生成目标 url 
var imgURL = URL.createObjectURL(file); 
// 用这个 URL 产生一个 <img> 将其显示出来 
$(&#39;body&#39;).append($(&#39;<img/>&#39;).attr(&#39;src&#39;, imgURL)); 
// 使用下面这句可以在内存中释放对此 url 的伺服，跑了之后那个 URL 就无效了 
// URL.revokeObjectURL(imgURL); 
} 
}); 
});

簡単な説明

つまり、全体の操作は次のように設計されています:

1. のイベントを変更し、イベント オブジェクトを取得します。 2. イベント オブジェクトを通じて、ファイル オブジェクトから使用可能な URL を生成します。 4. この URL を使用します。
5. *この URL のサーバーを解放します。
1. 同じファイルに対して、URL.createObjectURL が呼び出されるたびに、別の URL が再生成されます。 URL.createObjectURL が呼び出されると、ブラウザはこの URL を提供するためのスペースをメモリ内に自動的に作成します。これは、この URL を正常に要求できることを意味します。
3. URL.revokeObjectURL(imgURL) が呼び出される場合、サーバーはオフになります。この URL を再度リクエストすると 404 が返されます。これはすべてクライアントの問題であり、選択した画像も含めてサーバーは何も知りません。この imgURL は次のようになります。 3A//localhost%3A8000/22cc97d5 -5e46-4d87-9df4-c3e8c0aa72bb


関連する推奨事項:
HTML5 Canvas を使用してシンプルなオナニー ゲームを作成する

以上がHTML5 はローカル画像のプレビューを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。