javascript - 如何显示 jquery querySelector 选择的文件？

Question

我使用 jquery querySelector 创建了一个文件上传。选择后如何在跨度中显示选定的文件名？

我的html代码是

<span id="filename"></span>
<input type="file" id="fileElem" name="file">
<button class="buttonsCss" id="fileSelect">Upload resume</button>

js代码是

document.querySelector('#fileSelect').addEventListener('click', function(e) {
          // Use the native click() of the file input.
          e.preventDefault();
          document.querySelector('#fileElem').click();
      }, false);

如何在跨度#filename 中显示文件名

非常感谢您的帮助。谢谢

Answer 1

为 onchange 事件添加监听器，然后访问files列表

document.querySelector('#fileElem').onchange = function(e){
   var files = this.files;
   var name = files[0].name;
   document.querySelector("#filename").innerHTML = name;
};

JSFiddle