キーアップまたは変更時にリアルタイム画像出力を提供する

Question

とIDSomeImageUploadの画像を返す入力があります。アップロード後、入力は次のようになります。

<div class="uploaded-some-image has_image"> 
    <input name="SomeImageUpload" value="SomeImageID" type="hidden"> 
    <img data-name="image" src="SomeImageUrl"/> 
</div> 

そして私はIDSomeImage

<div id="SomeImage" style="background: url('SomeImageURL')"></div> 

私は、テキスト内のコンテンツのリアルタイム更新については、以下を使用してdivのbackground: url()にリアルタイムSomeImageUrlに表示し、入力を選択したいができません内で仕事をするstyle="background: url();"

$(function() { 
    $('#SomeImageUrl').bind('change keyup', function() { 
     $('#SomeImage').text($(this).val()); 
    }).keyup(); 
}); 

リアルタイ語にする必要があります画像が変更されると即座にstyle="background: url();"が更新されます。 PHP関数は良い応答を与える場合も大丈夫です。乾杯。

Answer 1

これを試してみてください:)

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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="form1" runat="server"> 
 
    <input type='file' id="imgInp" /> 
 
    <img id="blah" src="#" alt="your image" /> 
 
</form>

ハッピーどのように:)