时间戳

首页 > 解决方案 > 粘贴链接时如何更改图片网址

javascript - 粘贴链接时如何更改图片网址

问题描述

我在javascript中工作基本上我想在用户从设备中选择图像时显示图像图像必须更改我在javascript文件中使用的代码是

function changeProfile(){

    var location = document.getElementById("profileLocation");
    alert(location.value);
    var image = document.getElementById("profileAAImage");
    image.src(location.value);
}

我在 html 文件中编写的代码是

<div class="row">
                                <div class="col-md-3 form-group" style="padding-left: 7%;">
                                    <img  id="profileImage" style="border-radius: 200px;" src="images/interne/areab%20suhaib.jpg" class="img-thumbnail" width="100" height="100" >
                                </div>
                                <div class="col-md-9 form-group mt-3 mt-md-0" style="padding-top: 5%;">
                                    <input  type="file" name="file"  class="form-control" id="profileLocation" onclick="changeProfile()" onkeyup="changeProfile()" placeholder="select profile image"
                                            required>
                                </div>
                            </div>

我做什么来完成所需的任务。

标签： javascripthtmlcss

解决方案

更改location.value为location.files[0]获取所选文件。

function changeProfile() {
  var location = document.getElementById("profileLocation");
  var image = document.getElementById("profileImage");
  image.src = window.URL.createObjectURL(location.files[0]);
}
<div class="row">
  <div class="col-md-3 form-group" style="padding-left: 7%;">
    <img id="profileImage" style="border-radius: 200px;" src="images/interne/areab%20suhaib.jpg" class="img-thumbnail" width="100" height="100">
  </div>
  <div class="col-md-9 form-group mt-3 mt-md-0" style="padding-top: 5%;">
    <input type="file" name="file" class="form-control" id="profileLocation" onchange="changeProfile()" placeholder="select profile image" required>
  </div>
</div>

推荐阅读