画像をアップロードするときにローカルでプレビューする方法
今回は、写真をアップロードする際にまずローカルでプレビューする方法を説明します。写真をアップロードする際に注意すべき注意点は何ですか。実際のケースを見てみましょう。
FileReader オブジェクトを使用すると、Web アプリケーションは、読み取るファイルまたはデータを指定する File または Blob オブジェクトを使用して、ユーザーのコンピューターに保存されているファイル (または生データ バッファー) の内容を非同期的に読み取ることができます。この記事では、JS の FileRereader で画像をアップロードする前のローカル プレビュー機能を紹介します。必要な方は、
のリファレンスを参照してください。
下 アップロードしてプレビューする場合、成功後にバックグラウンドに移動し、URL をページに表示します。画像が比較的小さい場合は、プレビューの表示が遅くなります。ジャンクファイルも生成されるため、アップロードする前にローカルでプレビューすることをお勧めします。 プロジェクトに取り組んでプラグインを探していたとき、純粋なフロントエンドで画像のローカルプレビューが実現できることは知っていましたが、今日の面接でそれについて質問されて混乱し、その後私はコンピューターのデスクトップ上で実装されたデモを偶然発見し、そのデモに基づいて API をチェックし、簡単にまとめました:
event.target.files
input タグ
を使用して、画像をアップロードすると、イベント オブジェクトにはファイル オブジェクトのコレクションが含まれますMDN によると: FileReader オブジェクトにより、Web アプリケーションはファイルの内容を非同期的に読み取ることができますファイルまたは Blob オブジェクトを使用して、読み取られるファイルまたはデータのコンテンツを指定します。
まず、
コンストラクターとして、FileReaderのインスタンスオブジェクトを取得する必要があります
var freader = new FileReader();
readAsDataURL()メソッドを使用して、指定されたコンテンツを読み取ります
freader.readAsDataURL(file);
最後に、それは
イベント処理であり、これは以下と同等です読み込みの進行状況を監視しています。読み込みが完了すると画像がレンダリングされるので、onloadfreader.onload = function(e) { console.log(e); myImg.setAttribute('src', e.target.result); }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<input type="file" name="files" id="fileTog" accept="image/*" multiple="multiple" onchange="changImg(event)">
<img alt="暂无图片" id="myImg" src="" height="100px" width="100px">
</form>
<script>
function changImg(e){
var myImg = document.getElementById('myImg');
for (var i = 0; i < e.target.files.length; i++) {
var file = e.target.files[i];
console.log(file);
if (!(/^image\/.*$/i.test(file.type))) {
continue; //不是图片 就跳出这一次循环
}
//实例化FileReader API
var freader = new FileReader();
freader.readAsDataURL(file);
freader.onload = function(e) {
console.log(e);
myImg.setAttribute('src', e.target.result);
}
}
}
</script>
</body>
</html>推奨読書: 🎜🎜🎜JSをパッケージ化するためにimportとrequireを使用する🎜🎜🎜🎜🎜selectのオプションオーバーレイに対処する方法🎜🎜
以上が画像をアップロードするときにローカルでプレビューする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7529
15
1378
52
82
11
21
76
ローカル音楽をソーダミュージックに追加する方法
Feb 23, 2024 pm 07:13 PM
ローカル音楽を Soda Music に追加する方法? Soda Music APP にお気に入りのローカル音楽を追加できますが、ほとんどの友達はローカル音楽の追加方法を知りません。次は、Soda Music にローカル音楽を追加する方法に関するグラフィック チュートリアルです。編集者、興味のある方はぜひ見に来てください！ソーダ ミュージックの使用に関するチュートリアル. ソーダ ミュージックにローカル音楽を追加する方法. 1. まずソーダ ミュージック APP を開き、メイン ページの下部にある [音楽] 機能エリアをクリックします; 2. 次に、再生ページに入り、 をクリックします右下隅の [3 つの点] アイコン; 3. 最後に、下の機能バーを展開し、[ダウンロード] ボタンを選択してローカル音楽に追加します。
PHP でローカルに保存した後、リモート画像に透かしを追加して保存するにはどうすればよいですか?
Jul 11, 2023 pm 11:48 PM
PHP でローカルに保存した後、リモート画像に透かしを追加して保存するにはどうすればよいですか? PHP 開発では、リモート画像をローカルに保存する必要が生じることがよくあります。場合によっては、著作権を保護したり追加情報を追加したりするために、保存した画像に透かしを追加する必要がある場合もあります。この記事では、PHP を使用してリモートの写真をローカルに保存し、保存された写真にウォーターマークを追加する方法を紹介します。 1. リモート画像をローカルに保存する まず、PHP のファイル操作機能を使用して、リモート画像をローカルに保存する必要があります。簡単なコード例を次に示します: &
Vue で画像のスクロールとサムネイル プレビューを実装するにはどうすればよいですか?
Aug 18, 2023 pm 01:51 PM
Vue で画像のスクロールとサムネイル プレビューを実装するにはどうすればよいですか? Vue プロジェクトでは、多くの場合、多数の画像を表示する必要があるため、ユーザーがこれらの画像を簡単に参照してプレビューできることを望んでいます。この記事では、Vue コンポーネントを使用して画像のスクロール機能やサムネイル プレビュー機能を実装する方法を紹介します。まず、画像のスクロールとサムネイル プレビューを容易にするために、適切な Vue ライブラリをインストールして導入する必要があります。この例では、vue-awesome-swiper と vue-image-preview の 2 つのライブラリを使用して実装します。
将来の機能への早期アクセス Safari テクノロジー プレビュー 173 がリリース
Jul 02, 2023 pm 01:37 PM
Apple は本日、Safari 17 で開始される可能性のあるいくつかの機能をカバーする Safari テクノロジー プレビュー バージョン 173 をリリースしました。このバージョンは macOS Sonoma ベータ版および macOS Ventura システムに適しており、興味のあるユーザーは公式 Web サイトからダウンロードできます。 Safari Technology Preview バージョン 173 では、設定に機能フラグ ブロックが追加され、元の開発メニューの実験的機能が置き換えられます。このセクションを使用すると、開発者は特定の機能をすばやく検索し、さまざまな方法でステータスを「安定」、「テスト可能」、「プレビュー」、または「開発者」としてマークできます。再設計された開発メニューにより、クリエイターは Web ページ、Web アプリ、他のアプリの Web コンテンツを構築するための主要なツールを簡単に見つけることができます。
ハルビン医科大学の臨床薬学への就職に将来はありますか? (ハルビン医科大学の臨床薬学への就職の見通しはどのようなものですか?)
Jan 02, 2024 pm 08:54 PM
ハルビン医科大学の臨床薬学の就職の見通しはどのようなものですか? 全国の雇用情勢は楽観的ではありませんが、薬学部卒業生の就職の見通しは依然として良好です。全体として、薬学部卒業生の供給は需要を下回っており、製薬会社や製薬工場がその卒業生を吸収する主なチャネルとなっており、製薬業界における人材需要も着実に伸びています。報道によると、近年、医薬品製剤や生薬化学などの専攻の大学院生の需給比は1：10に達するケースもあるという。臨床薬学専攻の就職方向：臨床医学専攻の学生は卒業後、医療保健ユニット、医学研究部門等で治療、予防、医学研究等に従事することができます。雇用職種：医薬情報担当者、医薬品営業担当者、営業担当者、営業マネージャー、地域営業マネージャー、投資マネージャー、プロダクトマネージャー、プロダクトスペシャリスト、看護師
Vueフォーム処理でフォーム画像のアップロードとプレビューを実装する方法
Aug 10, 2023 am 11:57 AM
Vue フォーム処理でフォーム イメージのアップロードとプレビューを実装する方法 はじめに: 最新の Web アプリケーションでは、フォーム処理は非常に一般的な要件です。一般的な要件の 1 つは、ユーザーが画像をアップロードしてフォームでプレビューできるようにすることです。フロントエンド フレームワークとして、Vue.js は、この要件を達成するための豊富なツールとメソッドを提供します。この記事では、Vue のフォーム処理に画像のアップロードとプレビュー機能を実装する方法を説明します。ステップ 1: Vue コンポーネントを定義する まず、Vue グループを定義する必要があります
Win11 APK インストールガイド
Jan 03, 2024 pm 10:24 PM
ご存知のとおり、Microsoft は win11 で Android アプリケーションを実行し、ローカル APK をインストールできるようになると発表しました。しかし、Win11 をアップデートした後、ユーザーはローカル APK をインストールする方法がわからないことに気づきました。実際、これは Microsoft がまだ行っていないためです。この機能はまだwin11に実装されていないため、使用するには機能がインストールされるまで待つ必要があります。 win11 にローカル apk をインストールする方法: 1. Microsoft によると、win11 にこの機能がインストールされた後、ダウンロードした apk ファイルを直接ダブルクリックして直接インストールできます。 2. インストールが完了したら、ユーザーはシステム内で直接実行することもできます。 3. これは win11 の正式バージョンですが、Microsoft はまだこの機能を win11 に実装していません。 4. ユーザーが win11 を使用したい場合
Vue 経由で画像をアップロードしてプレビューするにはどうすればよいですか?
Aug 19, 2023 pm 09:25 PM
Vue 経由で画像をアップロードしてプレビューするにはどうすればよいですか?概要: 最新の Web アプリケーションでは、画像のアップロードとプレビューが一般的な要件です。 Vue は、人気のある JavaScript フレームワークとして、この機能を実現する便利な方法を提供します。この記事では、フロントエンド インターフェイスの設計とバックエンド インターフェイスの処理を含め、Vue を使用して画像をアップロードおよびプレビューする方法を紹介します。フロントエンド インターフェイスの設計: まず、画像を選択してアップロードするためのフロントエンド インターフェイスを設計する必要があります。 Vue では、<i を使用できます。
