Question

我修改了一个文件输入按钮（基本上它是隐藏的，而其他东西在它上面呈现），我想要获得＆＃39; meta＆＃39;上传一个或多个文件后的内容 - 在默认输入文件按钮中，有一个文本，向用户提供有关提交文件的信息（上传一个文件/上传10个文件，依此类推，具体取决于浏览器）。

我通过jQuery做了这个，下面是代码，但不幸的是我不能在网站上使用jQuery，因为还有另一个js库会影响很多插件和行为（砌体）。

<script>
$("#upload-form-file-button").change(function () {
var fileName = $(this).val().replace('C:\\fakepath\\', '');
if (this.files.length == 1)
    $("#upload-info").text(this.files.length + " image selected");
else
    $("#upload-info").text(this.files.length + " images selected");
});
</script>

如何在纯JavaScript中执行此操作，以便我不必更改js库？

谢谢。提笔

Answer 1

将你的jQuery翻译成vanilla JS：

document.getElementById("upload-form-file-button").onchange = function () {
  var fileName = this.value.replace('C:\\fakepath\\', '');
  var uploadInfo = document.getElementById('upload-info');
  if (this.files.length == 1)
    uploadInfo.innerText = this.files.length + " image selected";
  else
    uploadInfo.innerText = this.files.length + " images selected";
};

此外，如果您与jQuery的$变量存在冲突，则始终可以使用noConflict加载jQuery。

如何使用纯javascript获取文件输入的内容？

1 个答案: