在Keyup或Change上提供实时图像输出

Question

我的输入会返回带有URL ID的图片SomeImageUpload。上传后输入看起来像;

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

我希望通过SomeImageUrl background: url()

实时div显示ID SomeImage <div id="SomeImage" style="background: url('SomeImageURL')"></div>

style="background: url();"

我使用以下内容实时更新文本内容并选择输入，但无法在$(function() { $('#SomeImageUrl').bind('change keyup', function() { $('#SomeImage').text($(this).val()); }).keyup(); });

内工作

style="background: url();"

必须是实时的，因此当图像被更改时，它会立即更新List<SomeBean> wsListCopy = Optional.ofNullable(wsList) .map(List::stream) .orElseGet(Stream::empty) .collect(Collectors.toList()); 。如果能提供更好的响应，PHP函数也可以。欢呼声。

Answer 1

试试这个：）

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

快乐编码：）