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

【问题标题】：on Keyup or Change to give real-time image output在 Keyup 或 Change 上提供实时图像输出
【发布时间】：2017-12-14 12:32:37
【问题描述】：

我有一个输入返回图像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 到div 的background: url() 和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();"。如果能提供更好的响应，PHP 函数也可以。干杯。

【问题讨论】：

keyup 函数应该如何在隐藏的输入字段上工作？
您正在尝试将 keyup 事件绑定到 ID 为 SomeImageUrl 的元素。那不存在。
有一个上传锚点，打开一个单独的上传器，并将值返回给隐藏的输入。更改事件在 input value 和 img src 内。

标签： javascript php jquery html forms

【解决方案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>

快乐编码:)

【讨论】：