这是简单的jquery。对Ryan的建议稍加修改后给出一个代码示例。

基本的html:

<div id="image_icon"></div>
<div id="filename"></div>
<input id="the_real_file_input" name="foobar" type="file">

当你准备好时，一定要在输入上设置样式:不透明度:0 你不能设置display: none，因为它需要是可点击的。但是你可以把它放在“new”按钮下面，或者如果你喜欢的话，把它塞进z-index的其他东西下面。

设置一些jquery，当你点击图像时，点击真正的输入。

$('#image_icon').click(function() {
    $('#the_real_file_input').click();
});

现在你的按钮开始工作了。更改时只需剪切并粘贴值。

$('input[type=file]').bind('change', function() {
    var str = "";
    str = $(this).val();
    $("#filename").text(str);
}).change();

发长音!您可能需要将val()解析为更有意义的内容，但您应该已经全部设置好了。

这里有一个解决方案，它没有真正对<input type="file" />元素进行样式化，而是在其他元素之上使用<input type="file" />元素(可以进行样式化)。<input type="file" />元素实际上是不可见的，因此，整体的错觉是一个漂亮的样式文件上传控件。

我最近遇到了这个问题，尽管Stack Overflow上有太多的答案，但似乎没有一个真正符合要求。最后，我对它进行了定制，以获得一个简单而优雅的解决方案。

我还在Firefox、IE(11、10和9)、Chrome和Opera、iPad和一些android设备上进行了测试。

这里是JSFiddle链接-> http://jsfiddle.net/umhva747/

$('input[type=file]').change(function(e) { $in = $(this); $in.next().html($in.val()); }); $('.uploadButton').click(function() { var fileName = $("#fileUpload").val(); if (fileName) { alert(fileName + " can be uploaded."); } else { alert("Please select a file to upload"); } }); body { background-color:Black; } div.upload { background-color:#fff; border: 1px solid #ddd; border-radius:5px; display:inline-block; height: 30px; padding:3px 40px 3px 3px; position:relative; width: auto; } div.upload:hover { opacity:0.95; } div.upload input[type="file"] { display: input-block; width: 100%; height: 30px; opacity: 0; cursor:pointer; position:absolute; left:0; } .uploadButton { background-color: #425F9C; border: none; border-radius: 3px; color: #FFF; cursor:pointer; display: inline-block; height: 30px; margin-right:15px; width: auto; padding:0 20px; box-sizing: content-box; } .fileName { font-family: Arial; font-size:14px; } .upload + .uploadButton { height:38px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form action="" method="post" enctype="multipart/form-data"> <div class="upload"> <input type="button" class="uploadButton" value="Browse" /> <input type="file" name="upload" accept="image/*" id="fileUpload" /> <span class="fileName">Select file..</span> </div> <input type="button" class="uploadButton" value="Upload File" /> </form>

希望这能有所帮助!!

我能想到的唯一方法是在它被渲染后用javascript找到按钮，并分配一个样式给它

你也可以看看这个记录

你可以创建一个很棒的(未完成的)文件上传器到<button>元素或任何其他元素:

函数selectFile() { . getelementbyid (fileSelector) .click (); ｝ 输入# fileSelector (type = "文件"){ 显示:没有; ｝ 按钮onclick * =”()”){ 光标:指针; ｝ <input type="file" id="fileSelector"> <按钮onclick = " selectFile ()>选择文件从计算机

如果有人仍然关心如何在没有JavaScript的情况下做到这一点，让我完成Josh的回答:

如何显示文件名的文本:

最简单的方法是将这两个元素设置到一个位置:相对，给标签一个更高的z-index，并给输入文件负边距，直到标签文本在你想要的位置。不要在输入时使用display:none !

例子:

input[type="file"] {
  position:relative;
  z-index:1;
  margin-left:-90px;
}

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  position:relative;
  z-index:2;
  background:white;

}

可能会有很多牛角。但我喜欢在纯CSS中使用fa-buttons:

.divs { position: relative; display: inline-block; background-color: #fcc; } .inputs { position:absolute; left: 0px; height: 100%; width: 100%; opacity: 0; background: #00f; z-index:999; } .icons { position:relative; } <div class="divs"> <input type='file' id='image' class="inputs"> <i class="fa fa-image fa-2x icons"></i> </div> <div class="divs"> <input type='file' id='book' class="inputs"> <i class="fa fa-book fa-5x icons"></i> </div> <br><br><br> <div class="divs"> <input type='file' id='data' class="inputs"> <i class="fa fa-id-card fa-3x icons"></i> </div> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

小提琴:https://jsfiddle.net/zoutepopcorn/v2zkbpay/1/