如何设置文本框值以使用javascript上传文件名

how to set text box value to upload filename using javascript?

本文关键字：javascript 文件名 置文本      更新时间：2023-09-26

如何根据上传的文件名值设置文本框值。例如，我上传了像test.zip一样的文件，在文本框中影响了相同的值。下面的代码尝试但没有得到解决方案？

var filename= document.getElementById("file").value;
    <form>
     File: <input type="file" id="file" name="file"/>
     Upload File : <input type="text" value="'+filename+'"/>
    </form>

使用类似的东西

  <script>
   function setfilename(val)
  {
    var fileName = val.substr(val.lastIndexOf("''")+1, val.length);
   document.getElementById("filename").value = fileName;
  }
</script>
    <form>
     File: <input type="file" id="file" name="file" onchange="setfilename(this.value);"/>
     Upload File : <input type="text"  id="filename"/>
    </form>

您可以通过访问fileUpload的文件对象（如）来获取文件名

document.getElementById("file").files[0].name

将此值分配给类似的fileInput的文本字段onChange事件

document.getElementById("filename").value = document.getElementById("file").files[0].name;

将把第一个文件名设置到id为filename 的字段中

直接获取文件输入的值属性会得到像C:'fakepath'yourfilename.ext 这样的伪文件路径

您需要监听文件字段的onchange事件，当它发生时，您将值写入另一个文本输入。

var file = document.getElementById("file");
file.onchange = function() {
    document.getElementById('filename').value = file.value;
};

我为文本字段设置id的地方还有：

Upload File : <input type="text" id="filename" value="'+filename+'"/>

但是请注意，您可以从文件输入中检索到的值不是真的，但出于安全考虑，它有一个假路径。如果你只需要完整路径的文件名部分，你可以通过/字符将其分割，并取最后一块。

相关文章：