Javascript 如何使用glyphicon上传图像，而不是使用长输入字段？

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

点击图标后，我可以从电脑中选择一个图像。 下面是用于选择图像的小提琴，但它使用的输入字段太长

我想在鼠标上显示glyphicon&在另一个悬停在背景图像上的图像上

我该怎么做。。 请帮忙

我正在使用以下代码

HTML:-

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

如有任何建议，不胜感激。。[1] ：

$function{ $：file.changefunction{ 如果this.files&&this.files[0]{ var reader=新文件读取器； reader.onload=imagesisload； reader.readAsDataURLthis.files[0]； } }; }; 函数ImageIsLoaded{ $'myImg'.attr'src'，e.target.result； }; $upload。单击即可启动此功能{ $input[type='file']。单击； }; 输入[type='file']{ 显示：无； } $function{ $：file.changefunction{ 如果this.files&&this.files[0]{ var reader=新文件读取器； reader.onload=imagesisload； reader.readAsDataURLthis.files[0]； } }; }; 函数ImageIsLoaded{ $'myImg'.attr'src'，e.target.result； }; $upload。单击即可启动此功能{ $input[type='file']。单击； }; 输入[type='file']{ 显示：无； }

---

可以设置标签样式以显示图像并隐藏默认的上载按钮。 这是我看到的第一张照片，我刚刚拍了下来。 $function{ $：file.changefunction{ 如果this.files&&this.files[0]{ var reader=新文件读取器； reader.onload=imagesisload； reader.readAsDataURLthis.files[0]； } }; }; 函数ImageIsLoaded{ $'myImg'.attr'src'，e.target.result； }; 输入[类型=文件]{ 可见性：隐藏； 身高：0； 宽度：0； } 输入[类型=文件]+标签{ 显示：内联块； 右边距：20px； 高度：30px； 宽度：30px； 背景：url//www.gravatar.com/avatar/9cb3514ed62adf3741d9f511a97e3c0d/？default=&s=80不重复； 背景尺寸：封面； 光标：指针； }

---

可以设置标签样式以显示图像并隐藏默认的上载按钮。 这是我看到的第一张照片，我刚刚拍了下来。 $function{ $：file.changefunction{ 如果this.files&&this.files[0]{ var reader=新文件读取器； reader.onload=imagesisload； reader.readAsDataURLthis.files[0]； } }; }; 函数ImageIsLoaded{ $'myImg'.attr'src'，e.target.result； }; 输入[类型=文件]{ 可见性：隐藏； 身高：0； 宽度：0； } 输入[类型=文件]+标签{ 显示：内联块； 右边距：20px； 高度：30px； 宽度：30px； 背景：url//www.gravatar.com/avatar/9cb3514ed62adf3741d9f511a97e3c0d/？default=&s=80不重复； 背景尺寸：封面； 光标：指针； }

---

可能重复你能做的第一件事，在这里发布你的代码，而不仅仅是一个小提琴链接。可能重复你能做的第一件事，在这里发布你的代码，而不仅仅是一个小提琴链接。

$(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);
};