Html 如何更改<；的按钮文本；输入类型="；文件"/>；？

我试图修改

值

，但它不起作用。如何自定义按钮文本？

浏览器预定义了“上载文件…”文本，无法更改。

---

解决此问题的唯一方法是使用基于Flash或Java的上载组件，如。

编辑：我现在看到的是您询问的关于按钮文本的注释，而不是文件路径。我的错。我将在下面留下我的原始答案，以防其他人偶然发现这个问题，并以我最初的方式解释它

第二次编辑：我删除了这个答案，因为我认为我误解了这个问题，我的答案与此无关。然而，另一个答案中的评论表明，人们仍然希望看到这个答案，所以我正在取消删除它

我的原始答案（我以为OP是在询问路径，而不是按钮文本）：

---

出于安全原因，此功能不受支持。Opera web浏览器用于支持此功能，但已被删除。想一想，如果这一点得到支持，可能会发生什么；您可以使用文件上载输入创建一个页面，用某个敏感文件的路径预先填充该页面，然后使用

onload

事件触发的javascript自动提交表单。这种情况发生得太快，用户无法对其进行任何处理。

您可以放置一个图像，然后按如下方式执行：

HTML:

警告：

---

在IE9和IE10中，如果您在通过javascript输入的文件中触发onClick，则表单将被标记为“危险”且不能使用javascript提交，不确定是否可以传统方式提交。

这是一种可能对您有所帮助的替代解决方案。这会隐藏按钮外显示的文本，将其与div的背景色混合。然后您可以给div一个您喜欢的标题

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

上传图像

在这之前，添加一个图像，它将占据

对file元素使用以下CSS

<div style="padding:10px;font-weight:bolder; background-color:#446655;color: white;margin-top:10px;width:112px;overflow: hidden;">
     UPLOAD IMAGE <input style="width:100px;color:#446655;display: inline;" type="file"  />
</div>

使用，用于设置窗体文件字段的样式。它是基于jQuery的组件库TwitterBootstrap的插件

示例用法：

包括：

position:relative;  
opacity:0;  
z-index:99;

通过数据属性：

$(":file").filestyle();

more

是一个JQuery插件，用于更改输入文件元素的按钮文本

HTML示例：

document.getElementById("uploadBtn").onchange = function () {
    document.getElementById("uploadFile").value = this.value;
 };

结果:

---

在所有浏览器上都能完美地工作希望它也能为您工作

HTML:

CSS:

$('#choose-file').inputFileText({
    text: 'Select File'
});

更改

内容：“选择一些文件”中包含所需的文本

如果不使用firefox，则使用此选项而不是输入：

 .custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Select some files';
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

隐藏文件输入。创建新输入以捕获单击事件并将其转发到隐藏输入：

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

<input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">


使用
作为标题
如果您在使用rails时遇到问题，我想从@Fernando Kosh发布的原始答案中添加一些技巧


下载文件并复制文件bootstrap-filestyle.min.js ke folder app/assets/javascripts/
打开application.js并在下面添加此行

//=需要bootstrap-filestyle.min

打开你的咖啡，加入这一行

$（“：file”）.filestyle（{buttonName:“btn主”，buttonBefore:true，buttonText:“此处的文本”，图标：false}）

我想这就是你想要的：

label u {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

此处显示您的文本
仅CSS和引导类

<button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>


<input type='file' id="getFile" style="display:none"> 


浏览
简单

        <div class="col-md-4 input-group">
            <input class="form-control" type="text"/>
            <div class="input-group-btn">
                <label for="files" class="btn btn-default">browse</label>
                <input id="files" type="file" class="btn btn-default"  style="visibility:hidden;"/>
            </div>
        </div>


你的文字在这里

[使用代码段编辑]



你的文字在这里
您可以简单地添加一些css技巧。您不需要javascript或更多输入文件，我保留现有的值属性。只需添加css即可。你可以试试这个解决方案


.btn文件上传{
宽度：187px；
位置：相对位置；
}
.btn文件上载：之后{
内容：attr（value）；
位置：绝对位置；
排名：0；
左：0；
底部：0；
宽度：48%；
背景#795548；
颜色：白色；
边界半径：2px；
文本对齐：居中；
字体大小：12px；
线高：2；
}
以下是一种使用纯HTML和javascript“更改”文件类型输入文本的方法：

<label class="btn btn-primary">
  <i class="fa fa-image"></i> Your text here<input type="file" style="display: none;"  name="image">
</label>


*你想要的文本*
对我来说，它不适用于带有引导文件样式的自定义文本。它有助于按钮装饰，但文本很难更改，在开始与css搏斗之前，我尝试以下方法：

<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
    *The text you want*
</button>

引导文件样式使用名为butonText的类将组件呈现为span，因此在加载文档时只需更改文本。简单正确，它必须适用于所有浏览器

干杯
我这样做是为了我的项目：
.btn-outline.btn-primary{
颜色：#000；
}
.btn轮廓。btn主设备：活动，.btn轮廓。btn正设备：活动，.btn轮廓。btn负设备：活动{
颜色：#000；
}
.btn块{
显示：块；
宽度：100%；
填充：15px0；
边缘底部：10px；
字号：18px；
字体系列：Arial、Helvetica、无衬线字体；
文本对齐：居中；
}
您的文本
我知道，没有人要求它，但如果有人使用引导，可以通过标签和CSS伪选择器来更改它

要更改按钮文本，请执行以下操作：

$( document ).ready(function() {
   $('.buttonText').html('Seleccione ficheros');
});

要更改字段文本，请执行以下操作：

.custom-file-label::after {
  content: "What's up?";
}

像热一样放下它

这里有一个。
在Bootstrap+4.5中，您可以简单地将下面的样式添加到代码中：

<label class="custom-file-label" for="upload">Drop it like it's hot</label>


.custom file input~.custom file label:：after{
内容：“您的自定义文本…”；
}

以及您的输入：

<style>
    .custom-file-input ~ .custom-file-label::after {
        content: "Your custom text ...";
    }
</style>


您的自定义占位符。。。
你能证明它是不能更改的吗？或者浏览一下眉毛
<button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>


<input type='file' id="getFile" style="display:none"> 

        <div class="col-md-4 input-group">
            <input class="form-control" type="text"/>
            <div class="input-group-btn">
                <label for="files" class="btn btn-default">browse</label>
                <input id="files" type="file" class="btn btn-default"  style="visibility:hidden;"/>
            </div>
        </div>

<label class="btn btn-primary">
  <i class="fa fa-image"></i> Your text here<input type="file" style="display: none;"  name="image">
</label>

<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
    *The text you want*
</button>

$( document ).ready(function() {
   $('.buttonText').html('Seleccione ficheros');
});

.custom-file-label::after {
  content: "What's up?";
}

<label class="custom-file-label" for="upload">Drop it like it's hot</label>

<style>
    .custom-file-input ~ .custom-file-label::after {
        content: "Your custom text ...";
    }
</style>

<div class="custom-file">
    <input type="file" class="custom-file-input">
    <label class="custom-file-label">Your custom placeholder ...</label>
</div>