这是简单的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()解析为更有意义的内容，但您应该已经全部设置好了。

这些答案很好，它们都适用于非常具体的用例。也就是说，他们固执己见。

所以，这里有一个答案，它没有任何假设，但无论你如何修改它都是有效的。你可以用css改变设计，添加javascript，可能会显示一个文件名的变化，等等，它仍然会一直工作。

代码:

这里是核心css

.file-input{
  pointer-events: none;
  position: relative;
  overflow: hidden;
}
.file-input > * {
  pointer-events: none;
}
.file-input > input[type="file"]{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  pointer-events: all;
  cursor: pointer;
  height: 100%;
  width: 100%;
}

和核心html:

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

如您所见，我们强制将.file-input元素或其任何子元素上发生的任何指针事件(单击)代理到文件输入。这是因为文件输入的位置是绝对的，并且总是占用容器的宽度/高度。因此，您可以根据自己的需要进行定制。样式包装成一个按钮，使用一些js显示文件名选择，等等，没有什么会打破，只要上述核心代码保持不变。

正如你将在演示中看到的，我已经添加了一个带有文本“Select file”的span和一个带有额外样式的类来设置.file-input div的样式。这应该是任何人想要创建自定义文件上传元素的规范起点。

演示：JSFIDDLE

我发现插件解决方案太笨重了，所以我制作了自己的jQuery插件Drolex FileStyle。

This plug-in allows you to style file input fields however you want. Actually, you style div elements to look like a tricked out file input, and the actual file input is automatically overlaid with 0% opacity. No additional HTML is required. Just include the css and js files in the page you want Drolex FileStyle and that's it! Edit the css file to your liking. Don't forget the jQuery library if your page doesn't already have it. If the client does not run JavaScript, then the file input will not be modified by js or css.

测试工作在Chrome 24, Firefox 18, Internet Explorer 9。 预计可以在之前的版本中使用。

下载:http://web.drolex.net/Drolex-FileStyle.zip。

一个图像上传应用程序的演示，适用于大多数后端良好的动画功能。

// common function render_element(styles, el) { for (const [kk, vv] of Object.entries(styles)) { el.style[kk] = vv; } } function hoverOpacity(el) { el.addEventListener('mouseenter', function() { el.style.opacity = 0.75 }.bind(el)); el.addEventListener('mouseleave', function() { el.style.opacity = 1 }.bind(el)); } // return void event handler on setTimeout function buffer(func, time){ return e=>{ if(func.still)return; // first runtime if(!func.pft){ func(e); func.pft = true; func.still = false; return; } func.still = true; setTimeout(e=>{ func(e); func.still = false; }, time); } } // end of common const imageUploadButton = document.getElementById('image-upload-button'); imageUploadButton.addEventListener('click', e=>{ // pulse animation total time const d1 = document.getElementById('image-form'); let time = 600; if(d1.rendered){ d1.ready(); }else{ d1.ready = function(){ d1.style.display = 'flex'; d1.style.background = '#c5edd0'; this.d2.style.background = '#b4dbbf'; this.d3.style.background = '#95dea9'; this.d4.innerHTML = 'Drag and Drop or Click Above to Upload'; } let dismiss_btn = document.createElement('div'); render_element({ position: 'absolute', height: '30px', width: '30px', top: '0', right: '0', background: '#fff', borderRadius: '30px', cursor: 'pointer', margin: '2px', zIndex: '10', }, dismiss_btn); dismiss_btn.addEventListener('mouseenter', function(){this.style.background = '#fc4f30'}); dismiss_btn.addEventListener('mouseleave', function(){this.style.background = '#fff'}); dismiss_btn.addEventListener('click', ()=>{d1.style.display = 'none'}); d1.appendChild(dismiss_btn); const d3 = d1.querySelector('#image-input'); const d5 = d1.querySelector('#image-submit'); d5.style.visibility = 'hidden'; d1.parentNode.removeChild(d1); document.body.appendChild(d1); d1.removeChild(d3); let [ d2, d4, ] = Array.from({length: 3}, ()=>document.createElement('div')); let width = window.innerWidth; let d_styles = { display: 'flex', justifyContent: 'center', alignItems: 'center', }; render_element({ position: 'fixed', left: ((width - 430) / 2).toString() + 'px', width: '430px', top: '60px', height: '280px', zIndex: '10', }, d1); render_element(d_styles, d1); render_element({ width: '90%', height: '90%', }, d2); render_element(d_styles, d2); render_element({ width: '80%', height: '70%', fontSize: '0', cursor: 'pointer', }, d3); hoverOpacity(d3); render_element(d_styles, d3); d1.appendChild(d2); d2.appendChild(d3); let tt = time / 3; let ht = tt / 2; d1.addEventListener('dragover', buffer(e=>{ d1.style.background = '#ebf9f0'; setTimeout(()=>{ d1.style.background = '#95dea9'; }, ht); setTimeout(()=>{ d2.style.background = '#b6e3c2'; setTimeout(()=>{ d2.style.background = '#c4eed2'; }, ht); }, tt); setTimeout(()=>{ d3.style.background = '#cae3d1'; setTimeout(()=>{ d3.style.background = '#9ce2b4'; }, ht); }, tt); }, time)); d2.style.flexDirection = 'column'; render_element({ fontSize: '16px', textAlign: 'center', fontFamily: 'Verdana', }, d4); d2.appendChild(d4); d3.addEventListener('change', e=>{ // backend // d5.click(); // if backend succeed, run frontend setTimeout(()=>{ d1.style.background = '#dbcea2'; setTimeout(()=>{ d2.style.background = '#dbc169'; setTimeout(()=>{ d3.style.background = '#ebc034'; }, ht); }, tt); }, time); // display backend path here // now only display filename d4.innerHTML = d3.files[0].name; }); d1.d2 = d2; d1.d3 = d3; d1.d4 = d4; d1.ready(); d1.rendered = true; } }); #image-upload-button{ width: 200px; height: 40px; background: lightgrey; display: flex; align-items: center; justify-content: center; cursor: pointer; } #image-form{ display: none; } ::-webkit-file-upload-button { visibility: hidden; } <div id="image-upload-button">Upload Image <form id="image-form" action="post"> <input id="image-input" type="file" /> <button id="image-submit" type="submit"></button> </form> </div>

用css隐藏它，并使用$(selector).click()自定义按钮来激活浏览按钮。然后设置检查文件输入类型值的时间间隔。interval可以显示用户的值，这样用户就可以看到上传了什么。当表单提交时，间隔将清除[编辑]对不起，我一直很忙，是想更新这篇文章，这里是一个例子

<form action="uploadScript.php" method="post" enctype="multipart/form-data">
<div>
    <!-- filename to display to the user -->
    <p id="file-name" class="margin-10 bold-10"></p>

    <!-- Hide this from the users view with css display:none; -->
    <input class="display-none" id="file-type" type="file" size="4" name="file"/>

    <!-- Style this button with type image or css whatever you wish -->
    <input id="browse-click" type="button" class="button" value="Browse for files"/>

    <!-- submit button -->
    <input type="submit" class="button" value="Change"/>
</div>

$(window).load(function () {
    var intervalFunc = function () {
        $('#file-name').html($('#file-type').val());
    };
    $('#browse-click').on('click', function () { // use .live() for older versions of jQuery
        $('#file-type').click();
        setInterval(intervalFunc, 1);
        return false;
    });
});

:: file-selector-button

https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button

这是一个新的选择器，可用于设置文件选择器按钮的样式。

它在最新的浏览器版本上得到了全面支持。

输入(type =文件)::file-selector-button { 边框:2px实体#6c5ce7; 填充:.2em .4em; border - radius: .2em; background - color: # a29bfe; 过渡:1; ｝ 输入(type =文件)::file-selector-button:{徘徊 background - color: # 81 ecec; 边框:2px实体#00cec9; ｝ < >形式 <label for="fileUpload">上传文件</label> <input type="file" id="fileUpload"> > < /形式

下面是另一个演示不同样式的代码片段:

.input_container { 边框:1px solid #e5e5e5; ｝ 输入(type =文件)::file-selector-button { background - color: # fff; 颜色:# 000; 边界:0 px; 右边框:1px solid #e5e5e5; 填充:10px 15px; margin-right: 20 px; 过渡:0; ｝ 输入(type =文件)::file-selector-button:{徘徊 background - color: # eee; 边界:0 px; 右边框:1px solid #e5e5e5; ｝ < >形式 < div class = " input_container”> <input type="file" id="fileUpload"> < / div > > < /形式

我觉得这个答案是必要的，因为这里的大多数答案都过时了。