Question

此代码（linke to playground：http://tinyurl.com/6ed9dyv）

var label = new qx.ui.basic.Label('<input type="file" id="files" name="files[]"/>').set({width: 250, rich:true, wrap:true});

var doc = this.getRoot();
doc.setLayout(new qx.ui.layout.VBox(10));

doc.add(label);

var button1 = new qx.ui.form.Button("Test");
doc.add(button1);

button1.addListener("execute", function(e) {
  var obj = document.getElementById('files');
  if (obj)
    alert(obj.files.length);
});

对我不起作用。 obj.files总是未定义的。奇怪的是，当我切换到另一个选项卡然后回到包含此代码的选项卡时，它在具有多个选项卡的应用程序中工作。

Answer 1

我认为问题在于您是以一种未被考虑的方式添加HTML代码。我认为qx队列会做一些不像你的示例节目那样工作的东西。我做了一个小例子来说明如何使用自己的小部件完成它：

qx.Class.define("my.Upload",
{
  extend : qx.ui.core.Widget,

  members :
  {
    _createContentElement : function()
    {
      return new qx.html.Element(
        "input",
        {
          overflowX: "hidden",
          overflowY: "hidden"
        },
        {
          type: "file"
        }
      );
    }, 

    getFiles : function() {
      return this.getContentElement().getDomElement().files;
    }
  }
});

var upload = new my.Upload();

var doc = this.getRoot();
doc.setLayout(new qx.ui.layout.VBox(10));

doc.add(upload);

var button1 = new qx.ui.form.Button("Test");
doc.add(button1);

button1.addListener("execute", function(e) {
  alert(upload.getFiles().length);
});

这是指向正在运行的游乐场示例的链接： http://tinyurl.com/6xwxfq8

在qooxdoo中读取<input type =“file”/>

1 个答案: