<input type="file" value="Browse" name="avatar" id="id_avatar" />

我试图修改该值,但它不起作用。如何自定义按钮文本?


当前回答

在所有浏览器上都能完美工作,希望它也能为你工作。

HTML: <input type="file" class="custom-file-input">

CSS:

 .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);
}

更改内容:“选择一些文件”;里面有你想要的文本

如果不与firefox工作,然后使用这个而不是输入:

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

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

其他回答

“上传文件…”文本是浏览器预先定义的,不能更改。 解决这个问题的唯一方法是使用Flash或基于java的上传组件,比如swfupload。

编辑:我现在看到的评论,你是关于按钮文本,而不是文件路径。我的坏。我将把我最初的答案留在下面,以防其他人偶然发现这个问题,以我最初的方式解释它。

我删除了这个答案,因为我认为我误解了这个问题,我的答案是不相关的。然而,另一个答案中的评论表明,人们仍然想看到这个答案,所以我将其删除。

我最初的回答(我以为OP是在问路径,而不是按钮文本):

出于安全原因,该特性不受支持。Opera网络浏览器曾经支持这一点,但它被删除了。想想如果这得到支持会发生什么;您可以创建一个带有文件上传输入的页面,用一些敏感文件的路径预先填充它,然后使用onload事件触发的javascript自动提交表单。这将发生得太快,用户无法对此采取任何措施。

在所有浏览器上都能完美工作,希望它也能为你工作。

HTML: <input type="file" class="custom-file-input">

CSS:

 .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);
}

更改内容:“选择一些文件”;里面有你想要的文本

如果不与firefox工作,然后使用这个而不是输入:

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

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

使用<label>作为标题

<form enctype='multipart/form-data' action='/uploads.php' method=post>
<label for=b1>
    <u>Your</u> caption here
<input style='width:0px' type=file name=upfile id=b1
 onchange='optionalExtraProcessing(b1.files[0])'
 accept='image/png'>
</label>
</form>

这种工作不需要任何javascript。你可以随心所欲地把标签装饰成任何复杂程度。当您单击标签时,单击会自动重定向到文件输入。任何方法都可以使文件输入本身不可见。如果你想让标签看起来像一个按钮,有很多解决方案,例如:

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

    text-decoration: none;
    color: initial;
}

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

<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>