如何使用 jquery 显示自定义样式输入文件的文件名？答案

【问题标题】：How to display file name for custom styled input file using jquery?如何使用 jquery 显示自定义样式输入文件的文件名？
【发布时间】：2017-05-23 09:48:37
【问题描述】：

我已经使用 CSS 设置了文件输入的样式：

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer; 
}

<form>
  <label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Upload Image
  </label>
  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
</form>

一切正常，但我想显示选定的文件名。使用 CSS 或 jQuery 怎么可能？

【问题讨论】：

Styling an input type="file" button的可能重复
如果您可以将 name 属性放在标签中 - 那么这可以通过带有 attr() 函数的 CSS 来完成（生成的内容不能添加到输入元素）。 codepen.io/danield770/pen/XpmNYZ?editors=1100#0

标签： javascript jquery html css input-field

【解决方案1】：

由于持续更新浏览器 CSS 修复并非对所有浏览器都有效，请使用 JavaScript 版本解决上述问题。

解决方案 1

CSS sn-ps

.wrap-file_upload{position:relative; display:inline-block;}
.wrap-file_upload .btn_colorlayer,.wrap-file_upload:hover .btn_colorlayer{position: absolute; left: 102%; padding-left: 8px; max-width: 120px; white-space: nowrap;text-overflow: ellipsis; overflow: hidden; color:#d7263d;top: 50%; margin-top: -8px; text-transform: none; pointer-events:none; }
.wrap-file_upload input[type="file"]{opacity: 0; height:40px; display: inline; position: absolute; left: 0; top: 0; width: 230px; bottom: 0;}
.wrap-file_upload .btn_lbl{pointer-events: none;}

JavaScript sn-ps

function _updatename(obj){
    var _parentObj = $(obj).parents("[data-uploadfield]");
    _parentObj.addClass("wrap-file_upload");
    if(!_parentObj.find(".btn_colorlayer").length){
        _parentObj.append("<span class='btn_colorlayer'></span>")
    }
    var _tempname = "";
    if( $(obj).val() != "" && typeof( $(obj).val())!='undefined'){
        _tempname =  $(obj).val().split('\\');
        _tempname = _tempname[_tempname.length-1];
    }

    var _name = _tempname ||  $(obj).parents("[data-uploadfield]").attr("data-uploadfield") || "No file chosen";
    _parentObj.find(".btn_colorlayer").attr("title",_name).text(_name);
}

if($("[data-uploadfield]").length){
    $("[data-uploadfield]").each(function(i){
        _updatename($(this).find("input[type='file']"));
    });
}

$(document).on("click","[data-uploadfield] input[type='file']",function(){
    _updatename($(this));
});

$(document).on("change","[data-uploadfield] input[type='file']",function(){
    _updatename($(this));
});

//  Enable Custom Control for Ajax called pages
$( document ).ajaxComplete(function(event,request,settings){
    if($("[data-uploadfield]").length){
        _updatename("[data-uploadfield] input[type='file']");
    }
});

解决方案 2

仅适用于 CSS 解决方案

.file_upload {
  position: relative;
  min-width: 90px;
  text-align: center;
  color: #ee3333;
  line-height: 25px;
  background: #fff;
  border: solid 2px #ee3333;
  font-weight: 600;
}

a.file_upload {
  display: inline-block;
}

.file_upload .btn_lbl {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.file_upload .btn_colorlayer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 1;
  pointer-events: none;
}

.file_upload input[type="file"] {
  position: absolute;
  top: 3px;
  left: -86px;
  font-weight: 600;
  margin-left: 100%;
  color: #ee3333;
  outline: none;
}

<button class="file_upload" type="button">
      <span class="btn_lbl">Browse</span>
      <span class="btn_colorlayer"></span>
      <input type="file" name="fileupload" id="file_upload" />
    </button>

【讨论】：

您好，我已删除指向您网站的演示链接，因为它可能被视为垃圾邮件。如果链接页面被删除，您的演示可能会失效。所以，我创建了一个有效的 sn-p。
在 Linux 上的 FF 中看起来完全崩溃了。
如果你使用捷克语，它在 Chrome 中也坏了，它在文本中较长

【解决方案2】：

您必须在[type=file] 元素上绑定并触发更改事件，并将文件名读取为：

$('#file-upload').change(function() {
  var i = $(this).prev('label').clone();
  var file = $('#file-upload')[0].files[0].name;
  $(this).prev('label').text(file);
});

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Upload Image
  </label>
  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
</form>

【讨论】：

@Jai 这正是我想要的。非常感谢。
+1 但是对我来说它不适用于 $('#file-upload')[0].files[0].name;但它适用于 $('#file-upload').files[0].name;
如果你的标签在输入之后，那么 $(this).next('label').text(file);

【解决方案3】：

您需要在输入更改时获取文件名并将其插入到html中。在代码this.files[0].name 中获取所选文件的名称。

$("#file-upload").change(function(){
  $("#file-name").text(this.files[0].name);
});

$("#file-upload").change(function(){
  $("#file-name").text(this.files[0].name);
});

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <label for="file-upload" class="custom-file-upload">
        <i class="fa fa-cloud-upload"></i> Upload Image
    </label>
    <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
    <label id="file-name"></label>
</form>

您也可以使用 纯 javascript

来完成这项工作

document.querySelector("#file-upload").onchange = function(){
  document.querySelector("#file-name").textContent = this.files[0].name;
}

document.querySelector("#file-upload").onchange = function(){
  document.querySelector("#file-name").textContent = this.files[0].name;
}

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer; 
}

<form>
  <label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Upload Image
  </label>
  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;">
  <label id="file-name"></label>
</form>

【讨论】：

【解决方案4】：

我有一个很长的裂缝，我希望它可以帮助你可能需要根据自己的喜好设计更多样式

HTML

<form>
  <label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Upload Image
  </label>
  <input id="file-upload" name='upload_cont_img' type="file"     style="display:none;">
  <input id="uploadFile" placeholder="No File" disabled="disabled" />
</form>

CSS

.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

#uploadFile {
  text-align: center;
  border: none;
  background-color: white;
  color: black;
}

JavaScript

document.getElementById("file-upload").onchange = function() {
  document.getElementById("uploadFile").value = this.value;
};

JSFiddle 链接：https://jsfiddle.net/kd1brhny/

【讨论】：

【解决方案5】：

您也可以将其用于多个文件上传

updateList = function() {
  var input = document.getElementById('file');
  var output = document.getElementById('fileList');

  output.innerHTML = '<ul>';
  for (var i = 0; i < input.files.length; ++i) {
    output.innerHTML += '<li>' + input.files.item(i).name + '</li>';
  }
  output.innerHTML += '</ul>';
}

<input type="file" name="file" id="file" multiple 
       onchange="javascript:updateList()" />
<br/>Selected files:
<div id="fileList"></div>

【讨论】：

简单、有效且可定制。感谢您提供如此简单而强大的 sn-p。这个是为我做的。 (L)

【解决方案6】：

上传按钮样式

input[type="file"] {
    display: none;
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

<label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Custom Upload
</label>
<input id="file-upload" type="file"/>

【讨论】：

优秀的解决方案！
这不显示任何文件名，因此不回答问题。

【解决方案7】：

文件名可以这样取

$('#file-upload')[0].files[0].name

【讨论】：

这是正确的购买并不完美。它只获取文件名，您应该在输入更改并在 htm 中设置获取的名称时使用它。