如何将文件上传到我的JS应用程序？

Question

我正在研究extjs 4.2应用程序。尝试创建一个菜单工具栏，我可以在其中添加和删除文件。例如：

当我按打开时，我想查看文件浏览器窗口。当我选择完文件并点击“打开”后，我会看到类似的内容：

我知道我需要使用 onItemClick（）功能来打开浏览器。但我不知道如何调用那个窗口。另外，您如何编程，因此只能选择某些文件扩展名。

我猜你在文件浏览器窗口按“打开”后，左侧面板中的文件树将动态添加该文件。但不知道如何将“打开”连接到我的树上。

只是为了澄清 - 这将是基于用户的应用，它不会是一个webapp。这将在用户的浏览器中打开，就是这样。无需从服务器获取某些信息或向客户端发送内容。

编辑：我已经能够解决点击打开弹出文件浏览器对话框的部分。然后当我选择一个文件并按“打开”时，它会显示一个带文件名的消息框 以下是该部分的代码：

    var item = Ext.create('Ext.form.field.File', {
            buttonOnly: true,
            buttonText: 'Open',
            hideLabel: true,
            listeners: {
                'change': function(fb, v){
                     Ext.Msg.alert('Status', v);  
                }
            }
    });

    var mainmenu = Ext.create('Ext.menu.Menu', {
        width: 200,
        margin: '0 0 10 0',
        items: [item]
    });

现在的问题是我需要获取文件的 FULL PATH 。此消息仅显示文件的名称。有什么帮助吗？

Answer 1

在网络上使用文件可能会非常棘手，因此您必须要耐心，勤奋，并为自学习做好准备。

一个。如果要与所有浏览器兼容，则需要将文件上载到服务器，并让服务器返回有关该文件的信息。或者您可以尝试使用Sencha Desktop Packager，flash或签名的Java Applet。

如果您只使用现代浏览器，则需要阅读并学习HTML5文件API。这是一个开始：

https://developer.mozilla.org/en-US/docs/Web/API/FileReader?redirectlocale=en-US&redirectslug=DOM%2FFileReader

B中。现在开始使用文件字段按钮，稍后将其添加为menuitem，只是为了简单起见。如果要读取文件，您将需要收听文件字段的更改事件。

℃。要限制文件类型（只有现代浏览器允许这样做），您需要执行类似的操作（音频/ *只是一个示例）：

{
  xtype:'filefield',
  listeners:{
    afterrender:function(cmp){
      cmp.fileInputEl.set({
        accept:'audio/*' 
      });
    }
  }
}

d。获得文件后，您需要将其添加到树的TreeStore中。