用图像替换输入类型=文件 [英] Replace input type=file by an image

问题描述

像许多人一样，我想自定义丑陋的输入类型=文件，我知道，如果没有一些黑客和/或javascript，它是不可能做到的。但是，事情是，在我的情况下，上传文件按钮只是用于上传图像（jpeg | jpg | png | gif），所以我想知道是否我可以使用一个可点击的图像，完全作为输入类型文件（显示对话框，并在提交的页面上显示相同的$ _FILE）。

我发现了一些解决方法此处和

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, the thing is that in my case the upload file buttons are just for uploading images (jpeg|jpg|png|gif), so I was wondering if I could use a "clickable" image which would act exactly as an input type file (show the dialog box, and same $_FILE on submitted page).
I found some workaround here, and this interesting one too (but does not work on Chrome =/).

当你想为你的文件添加一些样式时，你们做什么？纽扣？如果你有任何观点，只要按下答案按钮;）

What do you guys do when you want to add some style to your file buttons? If you have any point of view about it, just hit the answer button ;)

干杯，

Nicolas

Cheers,
Nicolas

推荐答案

这对我非常有用：

<div class="image-upload">
    <label for="file-input">
        <img src="placeholder.jpg"/>
    </label>

    <input id="file-input" type="file"/>
</div>

使用样式：

.image-upload > input
{
    display: none;
}

基本上标签的 for

此外，display属性设置为none使得文件

Also, the display property set to none makes it so that the file input isn't rendered at all, hiding it nice and clean.

在Chrome中测试，但根据网络应该可以在所有主流浏览器上正常工作。 ：）

Tested in Chrome but according to the web should work on all major browsers. :)

EDIT：
在此添加JSFiddle： https://jsfiddle.net/c5s42vdz/

这篇关于用图像替换输入类型=文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！