用图像替换输入类型=文件

96

和很多人一样，我想定制丑陋的东西input type=file，而且我知道如果没有一些技巧和/或，这是不可能做到的javascript。但是，问题是，在我的情况下，上传文件按钮仅用于上传图像（jpeg | jpg | png | gif），因此我想知道是否可以使用clickable将完全用作输入类型文件的“ ”图像（显示对话框，并在提交的页面上显示相同的$ _FILE）。
我在这里找到了一些解决方法，这个方法也很有趣（但是在Chrome = /上不起作用）。

你们想在文件按钮中添加一些样式时会做什么？如果您对此有任何看法，只需点击“答案”按钮;）

css  image  file  button  input 
— 尼古拉斯
source
2
对于在这里着陆的每个人，tympanus.net/codrops/2015/09/15/…也许也值得一看。（不以任何方式，形状或形式与该网站
— 无关
— cнŝdk

Answers:

276

这对我来说真的很好：

.image-upload>input {
  display: none;
}
<div class="image-upload">
  <label for="file-input">
    <img src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg"/>
  </label>

  <input id="file-input" type="file" />
</div>
展开摘要

基本上，标签的for属性可以使单击标签与单击指定的输入相同。

另外，将display属性设置为none可以使其完全不呈现文件输入，从而将其隐藏起来很干净。

已在Chrome中进行了测试，但根据网络，该版本应可在所有主要浏览器上使用。:)

编辑： 在这里添加了JSFiddle：https : //jsfiddle.net/c5s42vdz/

— 硬性设定
source
我不确定人们是否仍将其视为“主要浏览器”，但这在IE7中似乎不起作用
— Hoppe 2013年
@Chet，似乎正在使用最新版本的Safari（7+），您使用的是哪个版本？
— 硬设置
1
@Toto对我来说，它在IE11中运行，我添加了一个JSFiddle，因此您也可以检查它。
— 硬性设置
@hardsetting你是对的！抱歉（也许我处于其他文档模式，即8或更低）
— Toto
2
抱歉，但我认为此代码必须使用文件名或至少显示一条消息，表明已成功选择该文件。用户选择文件后没有视觉输入。能做得到吗？选择文件后，可能会更改为其他图像？
— JoaMika
66

实际上，它可以在纯CSS中完成，这很容易...

HTML代码

<label class="filebutton">
Browse For File!
<span><input type="file" id="myfile" name="myfile"></span>
</label>

CSS样式 

label.filebutton {
    width:120px;
    height:40px;
    overflow:hidden;
    position:relative;
    background-color:#ccc;
}

label span input {
    z-index: 999;
    line-height: 0;
    font-size: 50px;
    position: absolute;
    top: -2px;
    left: -700px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding:0;
}

想法是将输入内容完全定位在标签内。将输入的字体大小设置为较大的字体，这将增加“浏览”按钮的大小。然后，需要使用负的left / top属性将输入浏览按钮放置在标签后面，这需要反复试验。

定位按钮时，将alpha设置为1。完成后将其重新设置为0（这样您就可以看到自己在做什么！）

确保跨浏览器进行测试，因为它们都会使输入按钮的尺寸略有不同。

— 梅尔斯
source
感谢托比，为什么会出现“ left：-700px;” ？在firefox中，文件输入字段实际上是在页面的左侧浮动的……它不粘在标签范围上……如果我删除“ left：-700px;” 它工作正常
— lisak 2011年
+1谢谢，@ Sloin向左移动：-700px，因为他想使浏览按钮位于按钮上方，因此光标将是指针而不是文本光标。
— Caleb Doucet 2012年
14

@hardsetting很棒的解决方案，但是我做了一些改进，使其可以在Windows中与Safari（5.1.7）一起使用

.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>
展开摘要

我用visibility: hidden, width:0代替display: noneSafari并添加pointer-events: none了img如果输入文件类型标记位于FORM标记中，标记添加了使其有效的功能。

似乎在所有主流浏览器中都为我工作。

希望它能帮助某人。

— 里士
source
无需添加style =“ pointer-events：none”即可创建问题以打开浏览文件。
— SantoshK '18
5

我将使用SWFUpload或Uploadify。他们需要Flash，但可以轻松做所有您想做的事情。

<input type="file">出于安全原因，可以随时从浏览器中删除任何试图通过单击实际控件以外的方式来触发“打开文件”对话框的基础解决方法。（我认为在FF和IE的当前版本中，不可能再以编程方式触发该事件。）

— 佩卡
source
谢谢，我也看到了它们，但我认为它们都需要Flash Player才能工作，并且我不想为用户添加另一个强制性层。另外，您确定它们将发送与输入文件相同类型的数据吗？我不想重新测试提交页面中完成的所有PHP。干杯。
— 尼古拉斯
@niko不，它们的工作方式不同，它们不是表单元素，而是自己将文件发送到接收脚本，因此您可能必须更改脚本的工作流程。如果这不是一个选择，我想您不能做比Shaun Inman在链接到的帖子中做的更好的事...
— Pekka 2010年
恐怕如此，那真是太丢人了。将来的CSS实施中没有关于它的任何内容吗？无论如何，谢谢您的答复：）
— Nicolas 2010年
@niko，不客气。关于CSS的好问题-我实际上不知道，但是HTML 5可能会在这里带来新的东西。查看appelsiini.net/2009/10/html5-拖放多个文件上传例如，。
— Pekka 2010年
是的，即使演示 appelsiini.net/demo/html5_upload/demo.html不与我的FF 3.6.3一起显示，而它说我确实需要FF 3.6.x，无论如何要回到我的问题，目前是HTML / CSS / Javscript（但没有Flash）只允许我做什么？一些字体和“颜色”定制？那我说的对吗？干杯。
— 尼古拉斯
5

如果我明白你的意思，这就是我的方法

的HTML

<label for="FileInput">
    <img src="tools/img/upload2.png" style="cursor:pointer" onmouseover="this.src='tools/img/upload.png'" onmouseout="this.src='tools/img/upload2.png'" alt="Injaz Msila" style="float:right;margin:7px" />
</label>
<form action="upload.php">
    <input type="file" id="FileInput" style="cursor: pointer;  display: none"/>
    <input type="submit" id="Up" style="display: none;" />
</form>

jQuery的

<script type="text/javascript">
    $( "#FileInput" ).change(function() {
      $( "#Up" ).click();
    });
</script>
— SystemDZ
source
3

它真的很简单，您可以尝试以下操作：

$("#image id").click(function(){
    $("#input id").click();
});
— Zicsus
source
2

您可以改为放置图像，并按以下方式进行操作：

HTML：

<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

jQuery的：

$("#upfile1").click(function () {
    $("#file1").trigger('click');
});

注意：在IE9和IE10中，如果您触发通过javascript输入的文件中的onclick，则表单会被标记为“危险”，并且无法用javascript提交，不确定是否可以按照传统方式提交。

— 帕帕
source
2 

        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>
展开摘要

运行SNIPPET或仅复制上面的代码并执行。您将得到想要的东西。没有javascript，非常简单有效。请享用！！！

— 新皮层
source
遗憾的是，这些方法对我来说在Safari中
— 不起作用
1

输入本身被CSS可见性隐藏：隐藏。

然后，您可以拥有任何想要的元素-锚点或图像..，当单击锚点/图像时，触发对隐藏输入字段的单击-将出现用于选择文件的对话框。

编辑：其实它可以在Chrome和Safari中工作，我只是注意到FF4Beta中不是这种情况

— 彼得鲁诺夫
source
1

工作代码：

只需隐藏输入部分并这样做即可。

<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>
— 用户名
source
1

在过去的十年中，我遇到了很多隐藏和看不见的输入问题，有时候事情比我们想象的要简单得多。

我曾对IE 5、6、7、8和9表示不支持不透明性，因此文件输入将覆盖上载图像，但以下CSS代码已解决了该问题。

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

以下内容已在chrome，IE 5、6、7、8、9、10上进行了测试，而IE 5中唯一的问题是它不支持自动页边距。

运行该片段只需复制并粘贴CSS，然后根据需要修改HTML的大小。

.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>
展开摘要

— 代号
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.