I have a form i'm making, and at the top i'd like to have an rounded image input like the one in the screenshot below, so when the user clicks it, they can upload their own image.My design for a website, including the image input
4 Answers
If i got your question, this is the way of doing it : by having a hidden input and jQuery
HTML:
<form>
<img src="http://via.placeholder.com/150x150" style="border-radius:50%"/>
<input type="file" id="myfile" style="display:none"/>
</form>
and javascript
$('#image').click(function(){
$('#myfile').click()
})
JS fiddle: https://jsfiddle.net/r89gbqh6/
Hope that helps! ;)
3 Comments
Mithu Mondal
For that to work, you need to have some server side code running.. or if you want to just show the preview before uploading.. check this out: jsfiddle.net/LvsYc/12446
miltonbhowmick
Thanks @mithu Modal
<style>
img {
border-radius: 50%;
}
</style>
<body>
<img src="sample.jpg" alt="profilepic" style="width:200px">
</body>
Use border radius as specified above. And make the image an link.
You can use "border-radius: 100%;" to make an image smooth out to a circle. See the border-radius demos at W3Schools. The same property works on field elements too (input, textarea, etc), but 100% will make any inputs an oval, so I'd recommend using a smaller value.
I've provided an example below of an image and an input field.
img{
border-radius: 100%;
}
input{
border-radius: 15px;
border: 1px #000 solid;
}<img src="http://via.placeholder.com/150x150" alt=""/>
<br/>
<input type="text"/>2 Comments
kode29
Ah. Then if you want to make the image clickable to make a file upload possible, you'll need a bit more. First, you'll need to have a form hidden on your page (like "display: none") with the file upload attribute (ex:
<input type="file" name="uploadfile" id="uploadfile"/>), then use something like Javascript to make the form active once the image is clicked, then you can run an AJAX Request to upload the photo in the backgroundYou need to use PHP or any other scripting language along with HTML. Refer above link to PHP code.
border-raadiusproperties. ref : w3schools.com/cssref/css3_pr_border-radius.asp