Question

如何根据上传的文件名值设置文本框值。例如我上传文件就像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>

Answer 1

使用像这样的东西

  <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>

Answer 2

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

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

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

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

会将第一个文件名设置到ID为filename

的字段中

直接获取文件输入的值属性会得到假文件路径，如C:\fakepath\yourfilename.ext

Answer 3

您需要侦听文件字段的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+'"/>

但是请注意，您可以从文件输入中检索的值不是真正的，但由于安全考虑，它具有虚假路径。如果您只需要文件名部分的完整路径，则可以按/字符广告将其拆分为最后一段。

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

3 个答案: