上传前在 html 输入中显示所选文件

【问题标题】：Display selected file in html input before upload上传前在 html 输入中显示所选文件
【发布时间】：2016-04-22 20:08:41
【问题描述】：

如何在 html 输入中显示我通过浏览字段选择的文件？我想在按上传之前查看我选择的文件吗？

这是我的代码：

          <input id="uploadFile" name="uploadFileOne" type="text" disabled="disabled" value="<?php echo $file_name; ?>" placeholder="EWIS" class="name-info-form file-witdth" />              
          <input class="upload" type="file" id="uploadOne" name="uploadOne" value="Select File"/ >

【问题讨论】：

您可能正在使用一些自定义输入字段，因为标准 html 输入 type='file' 显示所选文件名

标签： php html mysql file upload

【解决方案1】：

<form>
  <input class="upload" type="file" id="uploadOne" name="uploadOne" onchange="setfilename(this.value);" value="Select File"/ >
  <input id="uploadFile" name="uploadFileOne" type="text" disabled="disabled" placeholder="EWIS" class="name-info-form file-witdth" />
</form>

删除value=<?php echo $file_name; ?>并使用javascript在文本框中设置文件名

<script>
  function setfilename(val)
  {
    var fileName = val.substr(val.lastIndexOf("\\")+1, val.length);
    document.getElementById("uploadFile").value = fileName;
  }
</script>

当您使用浏览按钮选择文件时，onchange 事件将触发并在文本框中设置文件名:)

【讨论】：