如何在 html 和 css 中为表单创建圆形图像输入答案

【问题标题】：How to create a rounded image input for a form in html and css如何在 html 和 css 中为表单创建圆形图像输入
【发布时间】：2018-01-14 16:35:57
【问题描述】：

我正在制作一个表格，我希望在顶部输入一个圆形图像，如下面的截图所示，所以当用户点击它时，他们可以上传自己的图像。@987654321 @

【问题讨论】：

【解决方案1】：

如果我有你的问题，这就是这样做的方式： 通过隐藏输入和jQuery

HTML：

<form>
   <img src="http://via.placeholder.com/150x150" style="border-radius:50%"/>
   <input type="file" id="myfile" style="display:none"/>
</form>

和 javascript

$('#image').click(function(){
    $('#myfile').click()
})

希望对您有所帮助！ ;)

【讨论】：

【解决方案2】：

<style>
img {
  border-radius: 50%;
}
</style>

<body>

<img src="sample.jpg" alt="profilepic" style="width:200px">
</body>

使用上面指定的边框半径。并将图像作为链接。

【讨论】：

【解决方案3】：

你可以使用“border-radius: 100%;”使图像平滑成圆形。请参阅 W3Schools 上的 border-radius 演示。相同的属性也适用于字段元素（输入、文本区域等），但 100% 会使任何输入变为椭圆，因此我建议使用较小的值。

我在下面提供了一个图像和输入字段的示例。

img{
  border-radius: 100%;
 }
 input{
  border-radius: 15px;
  border: 1px #000 solid;
 }

<img src="http://via.placeholder.com/150x150" alt=""/>
<br/>
<input type="text"/>

【讨论】：

谢谢，我的设计没有问题，我只需要点击圆圈，它会打开一个文件浏览器，我可以上传图片到它
啊。然后，如果您想让图像可点击以使文件上传成为可能，您将需要更多。首先，您需要在页面上隐藏一个带有文件上传属性（例如：<input type="file" name="uploadfile" id="uploadfile"/>）的表单（例如“显示：无”），然后使用 Javascript 之类的东西在单击图像后激活表单，然后你可以运行AJAX Request在后台上传照片

【解决方案4】：

Upload file or image

您需要使用 PHP 或任何其他脚本语言以及 HTML。参考上面的 PHP 代码链接。

【讨论】：