JavaScript画像ローカルプレビュー機能の実装方法

この記事では、主にローカル画像プレビュー機能を実装するための JavaScript を紹介します。これは、IE 以外のブラウザの HTML5 フィルタ機能と、必要な友人にアップロードせずにローカル画像をプレビューする効果を実現する IE ブラウザの関連コンポーネント機能を対象としています。参考にしてください

この記事の例では、JavaScriptを使用して画像のローカルプレビュー機能を実装する方法を説明します。参考のためにみんなと共有してください。詳細は次のとおりです:

ファイルファイルフィールドで画像ファイルを選択した直後にプレビューを実装します。事前にサムネイル全体をサーバーにアップロードする必要はありません。その後、Ajax を使用してプレビューのためにサムネイル全体がフロントエンドに送信されます。 JavaScript を使用して直接実行でき、IE6 とも互換性があります。具体的な効果は以下の図のとおりです。

具体的な実装は、非 IE ブラウザでの表示には HTML5 を使用し、IE ブラウザでは IE のフィルタ機能を直接呼び出して実現します。具体的なコードは次のとおりです:

まず、プレビューで id=imghead の p (画像プレビューが配置される p) を生成します。

IE 以外の部分については、HTML5 を使用して、ユーザーが選択したファイルを直接読み取ることができます。関数 clacImgZoomParam(maxWidth, maxHeight, width, height) を使用してプレビュー画像のサイズを計算し、画像を id=imghead に変換します。 IE の場合、id=imghead で生成された p には style タグで設定されたフィルターが与えられ、ユーザーが選択した画像ファイルがフィルターを通して読み込まれ、clacImgZoomParam 関数がそのサイズを確認するために使用されます。サイズを取得したら、それをクリアします。プレビュー内のすべてのコンテンツは正式に生成されて画像フィルターが割り当てられ、そのサイズは p によって決定されます。

は file フィールドでも使用されます。accept="image/*"この HTML5 関数は、ユーザーが画像ファイルのみを選択できるように制限するために使用されます。ただし、フォームを送信するときにも判断する必要があります。 onSubmit と更新を同時に行い、ユーザーがサーバーに変なものを送信しないようにサーバーのバックグラウンドで判断する必要があります。

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