javascript - 如何使用 glyphicon 上传图像而不是使用那个长输入字段？

Question

我的意思是我想使用任何符号或字形图标来上传图像，而不是使用那么长的输入字段。 (用于上传个人资料照片)

点击那个字形图标后，我可以从我的电脑中选择一张图片。 下面是用于选择图像的 fiddle ，但它使用的输入字段太长了。

我想在鼠标悬停在悬停在背景图像上的另一个图像上显示该字形。

我该怎么做... 请帮助..

我正在使用以下代码

HTML:-

<input type='file' />
<img id="myImg" src="#" alt="your image" />

js代码:

$(function () {
$(":file").change(function () {
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = imageIsLoaded;
        reader.readAsDataURL(this.files[0]);
    }
});
});

function imageIsLoaded(e) {
    $('#myImg').attr('src', e.target.result);
};

任何建议表示赞赏.. [1]:http://jsfiddle.net/vacidesign/ja0tyj0f/

Answer 1

您可以设置标签样式以显示图像并隐藏默认上传按钮。 那是我看到并拍下的第一张照片。

$(function() {
  $(":file").change(function() {
    if (this.files && this.files[0]) {
      var reader = new FileReader();
      reader.onload = imageIsLoaded;
      reader.readAsDataURL(this.files[0]);
    }
  });
});

function imageIsLoaded(e) {
  $('#myImg').attr('src', e.target.result);
};

input[type="file"] {
  visibility: hidden;
  height: 0;
  width: 0;
}

input[type="file"]+label {
  display: inline-block;
  margin-right: 20px;
  height: 30px;
  width: 30px;
  background: url("//www.gravatar.com/avatar/9cb3514ed62adf3741d9f511a97e3c0d/?default=&s=80") no-repeat;
  background-size: cover;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="imgUpload" type='file' />
<label for="imgUpload"></label>
<img id="myImg" src="#" alt="your image" />