Question

在我的代码中，我有个人资料图片标签和用于更新图片的输入标签。

我要选择新图片onchange来更新个人资料图片

<div class="col-sm-6">
    <input type="file" name="userFiles" id="userFiles" class="form-control">
    <div class="text-danger" id="userfile_error" style="display:none;">
    </div>
</div>  
<img width="100" class="img-circle" src="<?php echo base_url() . "User_gallary/" . $user['photo']; ?>" id="myImg">

$("#myImg").onchange (function(){
    var x = $('#userFiles').val();
    document.getElementById("myImg").innerHTML = + x;
});

Answer 1

您可以使用以下代码：-

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('.img-circle').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

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

Answer 2

您不应更改.innerHtml属性，而应更改.src属性。

 $("#myImg").onchange (function(){
  var x = $('#userFiles').val();
  document.getElementById("myImg").src = + x;
});

此外，静态内容（图像）可能会有问题。

如何在个人资料图片标签中应用onchange图片预览

2 个答案: