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

Question

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

当我按打开时，我想看到文件浏览器窗口。当我完成选择文件并单击“打开”时，我会看到如下内容：

我知道我需要使用 onItemClick() 函数来打开浏览器。但我不知道如何调用那个窗口。另外，您如何编程以便只能选择某些文件扩展名。

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

澄清一下 - 这将是基于用户的应用程序，而不是网络应用程序。这将在用户的浏览器中打开，就是这样。无需从服务器获取信息或向客户端发送信息。

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

    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

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

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

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

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

B.现在从文件字段按钮开始，稍后将其添加为菜单项，以保持简单。如果您想读取文件，您将需要收听文件字段的更改事件。

C.要限制文件类型（只有现代浏览器允许这样做），您需要执行以下操作（audio/* 只是一个示例）：

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

D.获得文件后，您需要将其信息添加到树的 TreeStore。