1

私はjavascriptコードを使用しています。このコードは、アップロードする前に選択した画像を表示します。

Javascript

<script>
 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);
  });
 </script>

HTML

 <form id="imageform" method="post" enctype="multipart/form-data" >
       <input type="file" name="photoimg" id="imgInp" >
       <img id="blah" src="#" alt="your image" />
       <input type="submit" Value="Upload">
       </form>

このコードは完全に機能します。したがって、画像が画像よりも選択されていない場合、画像が選択されている場合はdispaly:none;画像を表示する場合は正常に動作する必要があります。クライアント側のスクリプトでこの問題を処理したいと考えています。

4

2 に答える 2

1

デフォルトで画像が非表示になるようにマークアップを変更します。

<img id="blah" src="#" alt="your image" style="display:none" />

そして、次showのようにファイルを読み取ったら、画像で jQuery メソッドを呼び出します。

$('#blah').attr('src', e.target.result);
$('#blah').show();

フィドルはこちら

于 2013-11-03T10:16:36.670 に答える
0

試す

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#blah').prop('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

jQuery(function () {
    $("#imgInp").change(function () {
        readURL(this);
    });
})

デモ:フィドル

于 2013-11-03T10:14:06.107 に答える