我正在尝试上传通过Polymer <paper-input type="file" id="filepicker">
元素选择的文件,但是当我尝试通过以下方式访问文件时:
var file = this.$.filepicker.files
我收到
files is not defined
错误。我还没有找到其他方法来访问纸质输入中的文件,所以我不确定问题出在哪里。
任何帮助,将不胜感激!
最佳答案
files
属性位于<input>
的内部<paper-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