如何在extJS中获取上传文件的文件详细信息

Question

如何在 extJS 中获取上传文件的文件详细信息

我正在使用文件上传，我需要先转换成网格，然后再提交。

对于网格转换，我必须像这样获取所有文件的详细信息：

File {
    webkitRelativePath: "", 
    lastModifiedDate: Tue Jul 14 2009 11:02:31 GMT+0530 (India Standard Time), 
    name: "file.xlsx", 
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", 
    size: 780831
 }

我在这里将其转换为 excell..

function handleFileSelect(evt){
    var files = evt.target.files;
    SessionConstant.uploadFileName = files[0].name;
    var xl2json = new ExcelToJSON();
    xl2json.parseExcel(files[0]);
   
   // Next code  
}


function ExcelToJSON  () {
    this.parseExcel = function(file) {
        var reader = new FileReader();

        reader.onload = function(e) {
          var data = e.target.result;
          var workbook = XLSX.read(data, {
            type: 'binary'
          });
          var uploadata = [];
          workbook.SheetNames.forEach(function(sheetName) {
           var XL_row_object = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
            var json_object = JSON.stringify(XL_row_object);
            console.log(JSON.parse(json_object));
            uploadata.push(JSON.parse(json_object));
            jQuery( '#xlx_json' ).val( json_object );
          });
           var uploadData = uploadata;

        };

        reader.onerror = function(ex) {
          console.log(ex);
        };

        reader.readAsBinaryString(file);
      };
};

所以当我使用这个

做这个代码时

{
    text:'Upload',
    handler : function(){
        var x = document.createElement("INPUT");
            x.setAttribute("type", "file");
            x.setAttribute("id","upload");

            document.body.appendChild(x);
            document.getElementById('upload').addEventListener('change', handleFileSelect, false);
            document.getElementById('upload').click();

        
    },
}

这工作正常。

现在如果我想在 extJS 中实现相同的文件上传，那么我可以提交我的表单：

{
    xtype: 'filefield',
    cls:'common-fileupload',
    itemId:'fileUploadId',
    clearOnSubmit:false,
    width:300,
    labelWidth : '0',
    name: 'myFile',
    buttonConfig: {
        text: 'Browse',
        height : 30
    },
    listeners: {
        change: function(fld, value) {
           var newValue = value.replace(/C:\fakepath\/g, '');
            fld.setRawValue(newValue);
            this.up().submit({
                url: 'url',
                method: 'POST',
                success: function (form, action) {
                    
                },
                failure: function (form, action) {
                   
                },
                error: function (form, action) {
                  
                }
            });
        }
    },
    style:'margin-right:10px'
}

所以在 Change 方法中如何获取文件详细信息，以便我可以编写我的 handleFileSelect 方法。

任何想法都会有所帮助。

Answer 1

对于经典框架，下面的方法应该有效：

  listeners: {
        change: function(fld, value) {
           let file = fld.fileInputEl.dom.files[0];
        }
    },

如何在extJS中获取上传文件的文件详细信息

how to get file details of uploaded file in extJS

javascript

extjs

extjs6