使用纸张输入访问选定的文件

Access file selected with paper-input

本文关键字：访问 文件 输入 张输入      更新时间：2023-09-26

我试图上传一个通过聚合物<paper-input type="file" id="filepicker">元素选择的文件，但当我试图访问文件:

var file = this.$.filepicker.files

我得到一个files is not defined错误。

我还没有找到任何其他方法来访问文件的纸张输入，所以我不确定这里的问题是什么。

任何帮助将不胜感激!

files属性位于<paper-input>的内部<input>元素上，您可以使用<paper-input>.inputElement.inputElement访问该元素。所以你可以这样写:

this.$.filepicker.inputElement.inputElement.files[0];

注意:在<paper-input>的早期版本中，内部的<input>是用this.$.filepicker.inputElement访问的，但后来它被重构为具有另一个容器(因此是this.$.filepicker.inputElement.inputElement)。

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    _handleFiles: function() {
      console.log(this.$.input.inputElement.inputElement.files[0]);
    }
  });
});
<head>
  <base href="https://polygit.org/polymer+1.10.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-input/paper-input.html">
</head>
<body>
  <x-foo></x-foo>
  <dom-module id="x-foo">
    <template>
      <paper-input type="file" id="input"></paper-input>
      <button on-tap="_handleFiles">Log file info</button>
    </template>
  </dom-module>
</body>

<一口> codepen

相关文章：