如何获取多个文件的输入类型=文件的文本值？

Question

我希望有人可以为我更新这个 JSFiddle 代码，以便为多个选定的图像显示多个输入框。

它非常适合单张图片。

document.getElementById('upload').onchange = uploadOnChange;

function uploadOnChange() {
  var filename = this.value;
  var lastIndex = filename.lastIndexOf("\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
  document.getElementById('filename').value = filename + "_date";
}

<input id="upload" type="file" multiple="multiple" />
<input id="filename" type="text" />

如有任何帮助，我们将不胜感激。

Answer 1

已更新jsfiddle

更改了 jQuery 版本。

使用 this.files 而不是 this.value 获取用户选择的所有文件。

Answer 2

@Anoop 和@dandavis 是对的。没有 jQuery 并保持行为，如果它是一个文件，则如下所示：

document.getElementById('upload').onchange = uploadOnChange;

function uploadOnChange() {
  var text = this.value;
    if (this.files && this.files.length > 1) {
      var filenames = [];
      for(i=0; i<this.files.length; i++) {
      var filename = this.files[i].name;
      var lastIndex = filename.lastIndexOf("\");
      if (lastIndex >= 0) {
        filename = filename.substring(lastIndex + 1);
      }
      filenames.push(filename);
    }
    text = filenames.join();
  }
  document.getElementById('filename').value = text;
}

JSFiddle：https://jsfiddle.net/bartvanderwal/Lego5bcp/4/

TODO：创建多个输入而不是连接文件名

如何获取多个文件的输入类型=文件的文本值？

How to get text value of input type=file for multiple files?

html

javascript

jsfiddle