Question

不确定如何设置或更改文件上传输入字段中“选择文件”按钮的文本。

<input id="choose_file" type="file" name="datafile" size="40">

input {
  padding: 10px 15px;
  border: 0;
  background: orange;
}

enter image description here

^这里背景的样式而不是按钮。

Answer 1

没有用于样式化input[type="file"]元素的本机选项。但是，this文章描述了一个很酷的（但很糟糕的）技巧，你可以用来完成这个。基本上是：

创建一个按钮并按照您希望的方式设置样式。
将<input type="file" />绝对放在新按钮元素的顶部。
向元素添加z-index，使其高出样式化按钮一个级别。
将输入设置为opacity: 0;
连接文章中描述的相应事件，以相应地生成输入函数。

Answer 2

正如我在评论中告诉你的那样，您可以简单地创建一个按钮并创建一个文件按钮，然后只需隐藏该文件按钮并将该事件绑定在样式按钮上以触发文件按钮。

我为此目的制作了这个例子： Codepen with custom file button

Answer 3

这是我使用MVC Razor表单显示的直接HTML 5解决方案，但您也可以使用普通的html表单。这解决了Input type = file在所有浏览器中都不呈现相同的问题。您可以通过为它设置背景图像来设置browseBtn的样式。我在IE 11，Firefox和Chrome中对此进行了测试。 IMO，默认Chrome原生控件（显示在问题中）的外观是不可接受的。

<强> Index.cshtml

<h2>Index</h2>
@using (Html.BeginForm("postFile", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
  <div style="display:inline-block; margin-bottom:10px">
    <input type="text" name="uploadControl" id="uploadControl" 
          style="width: 400px; height: 1.1em;" readonly="true" >
    <button type="button" id="browseBtn" >Browse...</button>
  </div>
  <input type="file" name="upfile" id="upfile" style="display:none;" >
  <button type="submit" id="uploadbtn" style="display:block">Click to upload</button>

  <br><br>
  @ViewBag.Message
}
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/UploadFile.js"></script>

<强> UploadFile.js

$('#browseBtn').click(function () {
   $('#upfile').first().trigger("click"); //cause the browse menu to pop up
});

$('#upfile').first().change(function (event) {
   event.preventDefault();
   var fileName = $('#upfile').val();
   if (fileName && fileName.length > 0) {
      $('#uploadControl').val(fileName);
   }
});

<强> HomeController.cs

    public ActionResult postFile(HttpPostedFileBase upfile)
    {
        if (upfile != null && upfile.ContentLength > 0)
        {
            try
            {
                string path = Path.Combine(Server.MapPath("~/Images"),
                Path.GetFileName(upfile.FileName));
                //upfile.SaveAs(path);
                ViewBag.Message =  Path.GetFileName(upfile.FileName) + " uploaded successfully";
            }
            catch (Exception ex)
            {
                ViewBag.Message = "ERROR:" + ex.Message.ToString();
            }
        }
        else
        {
            ViewBag.Message = "You have not specified a upfile.";
        }

        return View("Index");
    }

如何设置文件上传输入内的按钮

3 个答案: