ExtJs - 从文件字段中保存所选文件

时间:2016-11-21 15:08:41

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

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

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

1 个答案:

答案 0 :(得分:0)

你有两个可行的解决方案。

一个是使用Err _,并通过form发送文件(在提交前使用form.submit())。您可以使用MultipartFile检索服务器中的文件。

另一种方法是使用JS File API。在你form.isValid()函数中:

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); } }); 对象中,您拥有该文件的基本信息,然后您将在控制台中看到该文件的内容。

希望这有帮助!