样式化input type="file"。如何显示文件路径？

Question

我一直在尝试为input type="file"字段设置样式。 我的按钮已经有了样式，但我似乎无法弄清楚如何在用户选择要上传的文件时显示文件路径/文件。 有人能帮忙吗？

.file-upload {
  overflow: hidden;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  text-align: center;
  color: #fff;
  border: 2px solid #707070;
  background: #A0A0A0;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  text-shadow: #000 1px 1px 4px;
  cursor: pointer;
}

.file-upload:hover {
  background: #2FA2FF;
}

.file-upload.focus {
  outline: 2px solid yellow;
}

.file-upload input {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  font-size: 12px;
  opacity: 0;
  filter: alpha(opacity=0);
  z-index: -1;
}

.file-upload span {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  padding-top: .45em;
}

.file-upload {
  height: 38px;
}

.file-upload,
.file-upload span {
  width: 160px;
}

.file-upload-status {
  margin-left: 10px;
  vertical-align: middle;
  padding: 7px 11px;
  font-weight: bold;
  font-size: 16px;
  color: #888;
  background: #f8f8f8;
  border: 3px solid #ddd;
}

<form action="" method="POST" enctype="multipart/form-data">
  <div class="fileupload-buttonbar">
    <label class="file-upload"><span>Upload....</span><input name="uploadfile" type="file"> </label>
  </div>
</form>

- AttikAttak

---

出于安全原因，与用户操作系统相关的文件本身的信息是受保护的。您可以获取文件名称，但无法获取其存储路径。 - cimmanon

+1 给 @cimmanon。此外，无论您选择哪种样式，请在您想要支持的每个浏览器上进行彻底检查，因为不同的浏览器会以非常不同的方式呈现文件控件，并且它们中的大多数都对其如何进行样式设置有一定的限制。 - Spudley

Answer 1

为输入框添加一个 change 事件，然后获取它的 .value。

示例（使用 jQuery）：

$('input[name="uploadfile"]').change(function(){
    var fileName = $(this).val();
    alert(fileName);
});

示例：http://jsfiddle.net/hjNEC/2/

编辑: 由于输入字段已被隐藏，而文件名是其中的一部分，因此您需要自己在页面上显示fileName。

- gen_Eric

---

你好... 完美...我完成了这段JS代码。<script> jQuery(document).ready(function($) { $('input[name="uploadfile"]').change(function(){ var fileName = $(this).val(); var subfileName = fileName.substring(0,16)+"..."; $('#file-label').text(subfileName); }); }); </script> 因此，它会在按钮的“选择文件”标签上显示文件名...感谢你的帮助...新年快乐！ - AttikAttak

Answer 2

你可以创建一个新的div来显示文件路径，并在onchange事件中使用Javascript更新div中显示的路径，每当用户选择一个文件时。

<form action="" method="POST" enctype="multipart/form-data">
     <div class="fileupload-buttonbar">
          <input type="file" name="uploadfile" id="uploadfile" style="display:none" onchange="file_path_display.innerHTML=uploadfile.value"/>
          <span class="file-upload" onclick="uploadfile.click()" ondragdrop="uploadfile.dragdrop()">Upload....</span>
          <div id="file_path_display"></div>
     </div>
</form>

- Donald Duck