[解決済み] input type="file "で選択した画像をjQueryでポップアップ表示させるには?重複
2023-04-25 19:46:53
質問
私のコードでは、ユーザーが画像をアップロードできるようにしています。今、私はこの同じポップアップでプレビューとして選択された画像を表示したいと思います。どのように私はjQueryを使用してそれを行うことができますか?
以下は、私がポップアップウィンドウで使用している入力タイプです。
HTMLコードです。
<input type="file" name="uploadNewImage">
どのように解決するのですか?
HTMLです。
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
jQuery
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});
関連
-
[解決済み] HTMLのinputboxでjQueryを使って数字(0-9)だけを許可する方法は?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] jQueryを使ってドロップダウンリスト(セレクトボックス)から選択されたテキストを取得する
-
[解決済み] アップロード前に画像をプレビューする
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] jQuery Ajax呼び出し後のリダイレクトリクエストを管理する方法
-
[解決済み] jQueryで名前を指定して要素を選択するには?
-
[解決済み] 選択オプション「selected」を値で設定する
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JavaScript - 二重引用符のエスケープ
-
[解決済み] アップロード前に画像をプレビューする
-
[解決済み] jQuery データ属性の値に基づいて要素を検索する方法は?
-
[解決済み] 複数のクラスを削除する(jQuery)
-
[解決済み] jQueryを使って「Please Wait, Loading...」というアニメーションを作成するにはどうすればよいですか?
-
[解決済み] jQueryでオブジェクトに登録されたイベントハンドラを検索する
-
[解決済み] jQueryを使用して配列から特定の値を削除する方法
-
[解決済み】jQueryのテンプレートエンジン【終了しました
-
[解決済み】iPad版SafariでjQueryを使ってタッチイベントを認識させる方法は?可能でしょうか?
-
[解決済み] Jqueryのコードはヘッダーとフッターのどちらに入れるべきですか?