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

问题描述

就像很多人，我想自定义丑陋INPUT TYPE =文件，我知道，它不能没有一些黑客和/或JavaScript来实现。但是，事情是，在我的情况下上传文件按钮只是上传图像（JPEG | JPG | PNG | GIF），所以我在想，如果我可以用一个点击的形象这将正好用作输入类型的文件（显示对话框，并提交页面上相同$ _FILE）。

我发现了一些解决办法<一href=\"http://stackoverflow.com/questions/1351685/html-css-using-a-image-for-input-typefile\">here,和这个有趣的太（但无法在Chrome工作= /）。

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 ;)

干杯，

萨科

Cheers,
Nicolas

推荐答案

这个作品真的很适合我：

This works really well for me:

<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;
}

基本上在为标签的属性，使得它让点击该标签是一样的点击指定的输入

Basically the for attribute of the label makes it so that clicking the label is the same as clicking the specified input.

此外，设置为none display属性使得它，以便文件输入完全不渲染，隐藏得非常干净的。

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. :)

编辑：
新增的jsfiddle这里： https://jsfiddle.net/c5s42vdz/

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