更改输入类型 =“文件”中的默认文本？

将 label 的 for 属性用于 input。

<div>
  <label for="files" class="btn">Select Image</label>
  <input id="files" style="visibility:hidden;" type="file">
</div>

下面是获取上传文件名称的代码

$("#files").change(function() { filename = this.files[0].name; console.log(filename); });

---

我认为这就是你想要的：

你的文字在这里

---

每个浏览器都有自己的控件再现，因此您无法更改控件的文本或方向。

如果您想要 html/css 解决方案而不是 Flash 或 silverlight 解决方案，您可能想尝试一些“类型”的技巧。

http://www.quirksmode.org/dom/inputfile.html

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

就个人而言，由于大多数用户坚持使用他们选择的浏览器，因此可能习惯于在默认版本中查看控件，如果他们看到不同的东西，他们可能会感到困惑（取决于您正在处理的用户类型） .

---

这可能对将来的某人有所帮助，您可以根据需要为输入设置标签的样式，并将任何您想要的内容放入其中并隐藏输入，不显示任何内容。

它在带有 iOS 的科尔多瓦上完美运行

Seleccionar imagenes

---

这不可能。否则您可能需要使用 Silverlight 或 Flash 上传控件。

---

为了实现这一点，必须使用 display:none CSS 属性隐藏默认输入按钮，并添加一个新的按钮元素来替换它，这样我们就可以根据需要进行自定义。

使用引导程序

此处为可选文本 试试我

使用 jQuery

在这种情况下，添加到按钮元素的 onclick 属性指示 JavaScript 在单击可见按钮时单击隐藏的默认输入按钮。

此处为可选文本 点我

带有事件监听器的纯 JavaScript

document.getElementById('btn').addEventListener('click', () => { document.getElementById('input').click(); }) 此处为可选文本 点击我

---

$(document).ready(function () { $('#choose-file').change(function () { var i = $(this).prev('label').clone(); var file = $ ('#choose-file')[0].files[0].name; $(this).prev('label').text(file); }); }); .custom-file-upload{ 背景：#f7f7f7;填充：8px；边框：1px 实心#e3e3e3；边框半径：5px；边框：1px 实心#ccc；显示：内联块；填充：6px 12px；光标：指针； 你能试试这个 上传文件

---

诀窍是在点击文件输入时触发点击事件，并通过 CSS 管理默认输入文件的可见性。你可以这样做：jQuery：

$(function() {
  $("#labelfile").click(function() {
    $("#imageupl").trigger('click');
  });
})

css

.file {
  position: absolute;
  clip: rect(0px, 0px, 0px, 0px);
  display: block;
}

.labelfile {
  color: #333;
  background-color: #fff;
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  white-space: nowrap;
  padding: 6px 8px;
  font-size: 14px;
  line-height: 1.42857143;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

HTML 代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <input name="imageupl" type="file" id="imageupl" class="file" />
  <label class="labelfile" id="labelfile"><i class="icon-download-alt"></i> Browse File</label>
</div>

---

我制作了一个脚本并在 GitHub 上发布：获取 selectFile.js 易于使用，随意克隆。

HTML

<input type=file hidden id=choose name=choose>
<input type=button onClick=getFile.simulate() value=getFile>
<label id=selected>Nothing selected</label>

JS

var getFile = new selectFile;
getFile.targets('choose','selected');

演示

jsfiddle.net/Thielicious/4oxmsy49/

---

2017 年更新：

我已经研究了如何实现这一点。最好的解释/教程在这里：https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

我会在这里写摘要以防它变得不可用。所以你应该有 HTML：

<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>

然后用 CSS 隐藏输入：

.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;}

然后为标签设置样式：

.inputfile + label {
font-size: 1.25em;
font-weight: 700;
color: white;
background-color: black;
display: inline-block;
}

然后可以选择添加 JS 来显示文件名：

var inputs = document.querySelectorAll( '.inputfile' );
Array.prototype.forEach.call( inputs, function( input )
{
var label    = input.nextElementSibling,
    labelVal = label.innerHTML;

input.addEventListener( 'change', function( e )
{
    var fileName = '';
    if( this.files && this.files.length > 1 )
        fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
    else
        fileName = e.target.value.split( '\\' ).pop();

    if( fileName )
        label.querySelector( 'span' ).innerHTML = fileName;
    else
        label.innerHTML = labelVal;
});
});

但真的只是阅读教程并下载演示，它真的很棒。

---

这应该有效：

input.*className*::-webkit-file-upload-button {
  *style content..*
}

---

这是它如何使用引导程序完成的，只有你应该将原始输入放在某个地方...... idk 在头部并删除
如果你有它，因为它只是隐藏并且它占用空间:)

次要

---

使用 Bootstrap，您可以像下面的代码一样执行此操作。

<!DOCTYPE html>
<html lang="en">
<head>

  <style>
    .btn-file {
      position: relative;
      overflow: hidden;
    }

    .btn-file input[type=file] {
      position: absolute;
      top: 0;
      right: 0;
      min-width: 100%;
      min-height: 100%;
      font-size: 100px;
      text-align: right;
      filter: alpha(opacity=0);
      opacity: 0;
      outline: none;
      background: white;
      cursor: inherit;
      display: block;
    }

  </style>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <span class="btn btn-file">Upload image from here<input type="file">
</body>
</html>

---

我会使用 button 来触发 input：

<button onclick="document.getElementById('fileUpload').click()">Open from File...</button>
<input type="file" id="fileUpload" name="files" style="display:none" />

又快又干净。

---

您可以使用这种方法，即使输入大量文件也可以使用。

const fileBlocks = document.querySelectorAll('.file-block') const buttons = document.querySelectorAll('.btn-select-file') ;[...buttons].forEach(function (btn) { btn.onclick = function () { btn.parentElement.querySelector('input[type="file"]').click() } }) ;[...fileBlocks].forEach(function (block) { block.querySelector('input[type ="file"]').onchange = function () { const filename = this.files[0].name block.querySelector('.btn-select-file').textContent = '文件选择：' + 文件名 } } ) .btn-select-file { 边框半径：20px; } 输入[type="file"] { 显示：无； }

---

我的解决方案...

HTML：

<input type="file" id="uploadImages" style="display:none;" multiple>

<input type="button" id="callUploadImages" value="Select">
<input type="button" id="uploadImagesInfo" value="0 file(s)." disabled>
<input type="button" id="uploadProductImages" value="Upload">

查询：

$('#callUploadImages').click(function(){

    $('#uploadImages').click();
});

$('#uploadImages').change(function(){

    var uploadImages = $(this);
    $('#uploadImagesInfo').val(uploadImages[0].files.length+" file(s).");
});

这只是邪恶的：D

---

好的，创建自定义输入文件的非常简单的纯 css 方式。

使用标签，但正如您从以前的答案中知道的那样，标签不会在 Firefox 中调用 onclick 函数，可能是一个错误，但与以下内容无关。

<label for="file"  class="custom-file-input"><input type="file"  name="file" class="custom-file-input"></input></label>

您所做的是设置标签的样式以使其看起来像您想要的那样

    .custom-file-input {
        color: transparent;/* This is to take away the browser text for file uploading*/
        /* Carry on with the style you want */
        background: url(../img/doc-o.png);
        background-size: 100%;
        position: absolute;
        width: 200px;
        height: 200px;
        cursor: pointer;
        top: 10%;
        right: 15%;
    }

现在只需隐藏实际的输入按钮，但您不能将其设置为 visability: hidden

所以通过设置 opacity: 0; 使其不可见

input.custom-file-input {
    opacity: 0;
    position: absolute;/*set position to be exactly over your input*/
    left: 0;
    top: 0;
}

现在您可能已经注意到，我的标签上的类与我输入字段的类相同，那是因为我希望两者都具有相同的样式，因此无论您在何处单击标签，实际上都是在单击不可见的输入字段。

---

我构建了一个更容易做到这一点的脚本。

例如：

基本上，我的脚本与这个 link 非常相似

代码

纯javascript，不需要依赖