Replace input type=file by an image

后端未结

关注

 13  2066

Like a lot of people, I\'d like to customize the ugly input type=file, and I know that it can\'t be done without some hacks and/or javascript. But,

相关标签:

13条回答

慢半拍i

2020-12-02 04:41

I have had lots of issues with hidden and not visible inputs over the past decade sometimes things are way simpler than we think.

I have had a little wish with IE 5,6,7,8 and 9 for not supporting the opacity and thus the file input would cover the upload image however the following css code has resolved the issue.

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);

The following snipped is tested on chrome, IE 5,6,7,8,9,10 the only issue in IE 5 is that it does not support auto margin.

Run the snippet simply copy and paste the CSS and HTML modify the size as you like.

.file-upload{
	height:100px;
	width:100px;
	margin:40px auto;
	border:1px solid #f0c0d0;
	border-radius:100px;
	overflow:hidden;
	position:relative;
}
.file-upload input{
	position:absolute;
	height:400px;
	width:400px;
	left:-200px;
	top:-200px;
	background:transparent;
	opacity:0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);  
}
.file-upload img{
	height:70px;
	width:70px;
	margin:15px;
}

<div class="file-upload">
<!--place upload image/icon first !-->
<img src="https://i.stack.imgur.com/dy62M.png" />
<!--place input file last !-->
<input type="file" name="somename" />
</div>

0 讨论(0)

渐次进展

2020-12-02 04:45
its really simple you can try this:
```
$("#image id").click(function(){
    $("#input id").click();
});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

滥情空心

2020-12-02 04:46

        form input[type="file"] {
          display: none;
        }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
  <title>Simple File Upload</title>
  <meta name="" content="">
</head>

<body>
  <form action="upload.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <label for="fileToUpload">
      <img src="http://s3.postimg.org/mjzvuzi5b/uploader_image.png" />
    </label>
    <input type="File" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
  </form>
</body>

</html>

RUN SNIPPET or Just copy the above code and execute. You will get what you wanted. Very simple and effective without javascript. Enjoy!!!

0 讨论(0)

夕颜

2020-12-02 04:48
Great solution by @hardsetting, But I made some improvements to make it work with Safari(5.1.7) in windows
```
.image-upload > input {
  visibility:hidden;
  width:0;
  height:0
}
```
```
<div class="image-upload">
  <label for="file-input">
    <img src="https://placehold.it/100/000000/ffffff?text=UPLOAD" style="pointer-events: none"/>
  </label>

  <input id="file-input" type="file" />
</div>
```
I have used visibility: hidden, width:0 instead of display: none for safari issue and added pointer-events: none in img tag to make it working if input file type tag is in FORM tag.

Seems working for me in all major browsers.

Hope it helps someone.
0 讨论(0)
发布评论:

提交评论
- 加载中...

野趣味

2020-12-02 04:49

Working Code:

just hide input part and do like this.

<div class="ImageUpload">
   <label for="FileInput">
      <img src="../../img/Upload_Panel.png" style="width: 18px; margin-top: -316px; margin-left: 900px;"/>
   </label>

  <input id="FileInput" type="file" onchange="readURL(this,'Picture')" style="cursor: pointer;  display: none"/>
</div>

0 讨论(0)

温柔的废话

2020-12-02 04:51
A much better way than writing JS is to use native, and it turns to be lighter than what was suggested:
```
<label>
  <img src="my-image.png">
  <input type="file" name="myfile" style="display:none">
</label>
```
This way the label is automatically connected to the input that is hidden. Clicking on the label is like clicking on the field.
0 讨论(0)
发布评论:

提交评论
- 加载中...