当我从文件中选择新图像时更改图像

Question

我正在使用 input type = "file" 选择图像。但我隐藏了 选择文件按钮 并显示图像而不是那个。所以当用户点击图片时，文件选项就会打开。

这是我的代码

   <div class="image-get">
                    <label for = "LoadImage">
                      <span  class="glyphicon glyphicon-user">
                       <img id="PreviewImage" align="left">
                       </span>
                    </label>
                   <input type="file" name="LoadImage" id="LoadImage" data-bind="value: LoadImage, hasfocus: LoadImage.focused">

           </div>

这是我的 CSS

.image-get > input
{
display: none;
}

.image-get img
{
 width: 80px;
 cursor: pointer;
}

这是失去焦点时显示图像的js代码

   self.LoadImage.focused = ko.observable();

   self.LoadImage.focused.subscribe(
  function(newValue) {



              if (!newValue)
              {
                    //alert("yupppiiieeee");

                     var reader = new FileReader();


                     reader.readAsDataURL(document.getElementById("LoadImage").files[0]);


                        reader.onload = function (Event)
                        {

                         //var source = src;
                         document.getElementById("PreviewImage").src = Event.target.result;


                        };


              }

 })

我认为问题是由于 display : none 但我不确定。如果我删除它，选择文件选项会显示我不想显示的内容。 关于如何实现它的任何建议。谢谢你

Answer 1

如果我理解你的正确，它可以在你的输入字段上不设置display: none，只需将其 CSS 更改为此

.image-get > input
{
  position: absolute;
  left: -9999px;
}