ExtJs - 从文件字段中保存选定的文件答案

【问题标题】：ExtJs - Save selected file from filefieldExtJs - 从文件字段中保存选定的文件
【发布时间】：2016-11-21 15:08:41
【问题描述】：

我想使用 extjs6 现代工具包上传文件。因此，我显示带有文件选择器的MessageBox。在单击“确定”按钮上传文件（例如通过 HTTP POST）后，如何将所选文件检索到 javascript 对象中？

this.createUploadMsgBox("File Upload", function (clickedButton) {
    if (clickedButton == 'ok') {
        console.log("file: " + file);
    }

createUploadMsgBox: function (title, callback) {
        Ext.Msg.show({
            title: title,
            width: 300,
            buttons: Ext.MessageBox.OKCANCEL,
            fn: callback,
            items: [
                {
                    xtype: 'filefield',
                    label: "File:",
                    name: 'file'
                }
            ]
        });
    }

你可以在这里朗读我的例子：

https://fiddle.sencha.com/#view/editor&fiddle/1kro

【问题讨论】：

如果您从 MessageBox 切换到自定义 Ext.Sheet 并在其中包含 form 会更容易（并且更易于维护）；这是可能的还是MessageBox 是固定要求？
不，MessageBox 不是一个固定的要求，Ext.Sheet 也是可能的，如果这会带来任何好处。

标签： javascript extjs file-upload extjs6 extjs6-modern

【解决方案1】：

您有两种可能的解决方案。

一种是使用form，通过form.submit()发送文件（提交前使用form.isValid()）。您可以使用 MultipartFile 检索服务器中的文件。

另一种方法是使用JS File API。在你createUploadMsgBox函数中：

this.createUploadMsgBox("File Upload", function (clickedButton) {
   if (clickedButton == 'ok') {
      //console.log("file: " + file);
      var filefield = Ext.ComponentQuery.query('filefield')[0];
      var file = filefield.el.down('input[type=file]').dom.files[0];
      var reader = new FileReader();
      reader.onload = (function(theFile) {
          return function(e) {
              console.log(e.target.result);
          };
      })(file);
      reader.readAsBinaryString(file);
   }
});

在file 对象中你有文件的基本信息，然后你会在控制台看到文件的内容。

希望这会有所帮助！

【讨论】：