用图像替换输入类型=文件
Posted
技术标签:
【中文标题】用图像替换输入类型=文件【英文标题】：Replace input type=file by an image 【发布时间】：2011-02-20 18:51:52 【问题描述】：像很多人一样，我想定制丑陋的input type=file，而且我知道如果没有一些技巧和/或javascript，这是无法做到的。但是，在我的情况下，上传文件按钮仅用于上传图片 (jpeg|jpg|png|gif)，所以我想知道是否可以使用“clickable”图片这将完全充当输入类型文件（显示对话框，并在提交的页面上显示相同的 $_FILE）。
我也找到了一些解决方法 here 和 this interesting one（但不适用于 Chrome =/）。
当您想为文件按钮添加一些样式时，你们会怎么做？如果您对此有任何看法，请点击回答按钮；）
【问题讨论】：
对于登陆这里的每个人来说，tympanus.net/codrops/2015/09/15/… 可能也值得一看。 （不以任何方式、形式或形式隶属于该网站。） 您可以查看How to make photo to work as input type file?。 【参考方案1】：我会使用SWFUpload 或Uploadify。他们需要 Flash，但可以轻松完成您想做的一切。
出于安全原因，任何基于<input type="file"> 的解决方法如果尝试通过单击实际控件以外的方式触发“打开文件”对话框，则可以随时从浏览器中删除。 （我认为在当前版本的 FF 和 IE 中，不可能再以编程方式触发该事件。）
【讨论】：
谢谢，我也见过他们，但我认为他们都需要一个 Flash 播放器才能工作，我不想为用户添加另一个强制层。另外，您确定他们会发送与输入文件完全相同类型的数据吗？我不想重新测试我在提交页面中完成的所有 php。干杯。 @niko 不，它们的工作方式不同，它们不是表单元素，而是自行将文件发送到接收脚本，因此您可能必须更改脚本的工作流程。如果这不是一个选项，我认为你不能比 Shaun Inman 在链接到的帖子中做得更好...... 恐怕那真是太可惜了。在未来的 CSS 实现中没有任何关于它的内容吗？无论如何感谢您的回复:) @niko 不客气。关于 CSS 的好问题 - 实际上我不知道，但 html 5 很可能会在这里带来新的东西。以appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload 为例。 是的，即使演示 appelsiini.net/demo/html5_upload/demo.html 没有与我的 FF 3.6.3 一起显示，但它说我确实需要 FF 3.6.x，这似乎很有希望无论如何，回到我的问题，目前是 HTML/ CSS/Javscript（但没有 Flash）只允许我做什么？一些字体和“颜色”定制？那我说对了吗？干杯。【参考方案2】：其实可以用纯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;
我们的想法是将输入绝对定位在标签内。将输入的字体大小设置为较大的值，这将增加“浏览”按钮的大小。然后使用负左/上属性进行一些试验和错误来将输入浏览按钮定位在标签后面。
定位按钮时，将 alpha 设置为 1。完成后将其设置回 0（这样您就可以看到自己在做什么！）
确保跨浏览器进行测试，因为它们都会使输入按钮的大小略有不同。
【讨论】：
谢谢托比，为什么会有'left: -700px;' ?在 Firefox 中，文件输入字段实际上浮动在页面的左侧......它不会粘在标签跨度上......如果我删除 'left: -700px;'它工作正常 +1 谢谢，@Sloin left:-700px 因为他想让浏览按钮位于按钮上方，这样光标将是指针而不是文本光标。【参考方案3】：输入本身通过 CSS 可见性隐藏：隐藏。
然后你可以拥有任何你想要的元素 - 锚点或图像..，当单击锚点/图像时，触发对隐藏输入字段的单击 - 将出现选择文件的对话框。
编辑：实际上它适用于 Chrome 和 Safari，我只是注意到在 FF4Beta 中不是这样
【讨论】：
【参考方案4】：这对我来说非常有效：
.image-upload>input
display: none;
<div class="image-upload">
<label for="file-input">
<img src="https://icons.iconarchive.com/icons/dtafalonso/android-lollipop/128/Downloads-icon.png"/>
</label>
<input id="file-input" type="file" />
</div>基本上标签的for属性使得点击标签与点击指定的输入是一样的。
此外，将 display 属性设置为 none 使得文件输入根本不呈现，将其隐藏得很好且干净。
在 Chrome 中测试，但根据网络应该适用于所有主要浏览器。 :)
编辑： 在此处添加 JSFiddle：https://jsfiddle.net/c5s42vdz/
【讨论】：
我不确定人们是否仍然认为它是“主流浏览器”，但这似乎在 IE7 中不起作用 @Chet 它似乎正在使用最新版本的 Safari (7+) 你使用的是哪个版本？ @Toto 对我来说它在 IE11 中工作，我添加了一个 JSFiddle，所以你也可以检查它。 @hardsetting 你是对的！抱歉（也许我使用了不同的文档模式，ie8 或更低） 抱歉，但我认为必须使用文件名更新此代码，或者至少使用文件已成功选择的消息进行更新。用户在选择文件后对发生的事情没有视觉输入。请问这样可以吗？选择文件时，可能会更改为不同的图像？【参考方案5】：你可以放一张图片，像这样：
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 提交，不确定是否可以传统方式提交。
【讨论】：
【参考方案6】：工作代码：
只需隐藏输入部分并这样做。
<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>
【讨论】：
【参考方案7】：如果我明白你的意思，这是我的方法
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'" 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>
【讨论】：
【参考方案8】： 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。享受！！！
【讨论】：
遗憾的是这些方法对我来说在 Safari 中不起作用:(【参考方案9】：真的很简单，你可以试试这个：
$("#image id").click(function()
$("#input id").click();
);
【讨论】：
【参考方案10】：@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: none 来解决safari 问题，并在img 标记中添加了pointer-events: none 以使其在输入文件类型标记在FORM 标记中时工作。
似乎在所有主流浏览器中都适合我。
希望它可以帮助某人。
【讨论】：
没有必要添加 style="pointer-events: none" 它会创建问题以打开浏览文件。【参考方案11】：在过去十年中，我遇到了很多隐藏和不可见输入的问题，有时事情比我们想象的要简单得多。
我有点希望 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 中唯一的问题是它不支持自动边距。
运行 sn -p 只需复制和粘贴 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>【讨论】：
【参考方案12】：比写 JS 更好的方法是使用原生， 它变得比建议的要轻：
<label>
<img src="my-image.png">
<input type="file" name="myfile" style="display:none">
</label>
这样label 会自动连接到隐藏的输入。
点击标签就像点击字段一样。
【讨论】：
【参考方案13】：您可以用新选择的图像自动替换图像。
<div class="image-upload">
<label for="file-input">
<img id="previewImg" src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg" style="width: 100px; height: 100px;" />
</label>
<input id="file-input" type="file" onchange="previewFile(this);" style="display: none;" />
</div>
<script>
function previewFile(input)
var file = $("input[type=file]").get(0).files[0];
if(file)
var reader = new FileReader();
reader.onload = function()
$("#previewImg").attr("src", reader.result);
reader.readAsDataURL(file);
</script>
【讨论】：
可能是最完整的答案。【参考方案14】：<script type="text/javascript">
function upl()
var fileSelector = document.createElement('input');
fileSelector.setAttribute('type', 'file');
fileSelector.setAttribute('name', 'uploimg');
fileSelector.setAttribute('accept', 'image/*');
fileSelector.click();
fileSelector.style.display = "none";
fileSelector.onchange = function()
document.getElementById("indicator").innerHTML = "Uploaded";
;
document.getElementById("par_form").appendChild(fileSelector);
</script>
<form id="par_form">
<img src="image_url" onclick="upl()"><br>
<span id="indicator"></span><br>
<input type="submit">
</form>
【讨论】：
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。以上是关于用图像替换输入类型=文件的主要内容，如果未能解决你的问题，请参考以下文章