将<input>按钮更改为超链接标记<a>？

Question

我需要改变我的化身形象，然后按下更改图片按钮选择图像，然后有一个新添加的照片预览。这是我的代码：

.html

<!-- Avatar -->
<div class="avatar avatar-xl mb-6">
    <img class="rounded-circle account-img" id="id_image_display" src="{{ user.profile.image.url }}"  alt="...">
</div>
<div class=" mb-6 mt-7 ml-2">
    <div class="form-group image-group" id="id_image_group">
        <a href="" id="upload_avator_link">
           <b>Change picture</b>
        </a>

    </div>

    <div class="group-input">
         <input type="file" name="image" id="upload_avator" accept="pics/*" onchange="readURL(this)">
    </div>


</div>

这是Js的功能：

.js

     document.getElementById('id_image_group').onclick = function(event){
          document.getElementById('upload_avator').click();
     };

     function readURL(input){
         var reader = new FileReader();
         reader.onload = function (e) {
             $('#id_image_display')
                 .attr('src', e.target.result)
         };
         reader.readAsDataURL(input.files[0]);
     }

这是.css代码：

#upload_avator_link{
    text-decoration:none;
}
#upload_avator{
    display:none
}

它应该能用，但它不管用！任何形式的帮助都将不胜感激。

Answer 1

您的<a href...>标记正在尝试导航。试着改为：

<a id="upload_avator_link">

如果您希望文本看起来像一个超链接，您可以根据需要对其进行样式设计。您可以去掉<a>标记，只需对父div进行样式设置。

此外，为了实现完全的浏览器兼容性，您可能需要将<input... />字段包装在<form>...</form>标记中。