1. ホーム
  2. jquery

[解決済み] 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);
});

参照