Extjs将Excel文件上传到WCF Restful服务

时间:2013-08-24 12:52:10

标签: wcf web-services excel rest extjs

我正在尝试将文件上传到wcf服务并让它读取excel文件并以json格式返回文件内的数据。有关如何在estjs中创建文件上传的参考示例,下面是代码

Ext.create('Ext.form.Panel', {
    renderTo: 'fi-form',
    width: 500,
    frame: true,
    title: 'File Upload Form',
    bodyPadding: '10 10 0',

    defaults: {
        anchor: '100%',
        allowBlank: false,
        msgTarget: 'side',
        labelWidth: 50
    },

    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    },{
        xtype: 'filefield',
        id: 'form-file',
        emptyText: 'Select an Excel',
        fieldLabel: 'Excel',
        name: 'Excel-path',
        buttonText: '',
        buttonConfig: {
            iconCls: 'upload-icon'
        }
    }],

    buttons: [{
        text: 'Save',
        handler: function(){
            var form = this.up('form').getForm();
            if(form.isValid()){
                form.submit({
                    url: 'rest/upload.svc',
                    waitMsg: 'Uploading your file...',
                    success: function(fp, o) {
                        msg('Success', 'Processed file "' + o.result.file + '" on the server');
                    }
                });
            }
        }
    },{
        text: 'Reset',
        handler: function() {
            this.up('form').getForm().reset();
        }
    }]
});

我的问题是,在我的wcf rest服务中,服务期望什么样的数据类型?

在客户端代码中,就像将整个表单发布回服务一样,我可以使用request.Form(“Excel-path”)来获取excel文件吗?

这是一个很好的方法吗?我曾尝试使用

在客户端读取excel文件
ActiveXObject("Excel.Application")

但它只适用于IE,它需要在IE中更改一些activeX设置,这就是为什么我正在考虑使用服务来读取文件。想知道有没有其他方法可以做到这一点。

1 个答案:

答案 0 :(得分:2)

ExtJS将创建一个隐藏的iFrame,并通过该iFrame中的表单将文件发布到您的服务器。

您的服务器应该有一个接受多部分表单POST的URL。

ExtJS需要来自您服务器的 HTML 响应。

发送到服务器:

Content-Type: multipart/form-data...
POST /files
Request Payload...

服务器返回:

Status: 201 Created
Content-Type: text/html    
{
  success:true,
  id:123,
  link:"/files/123"
}

您的服务器还应该有一个可以返回文件表示的控制器:

发送到服务器:

GET /files/123
Accept: application/json

服务器返回:

Status: 200 OK
Content-type: application/json
{
  id:123,
  fileName:"somefile.xls",
  someData:"..."
}

所以你需要做两件事:将文件发送到服务器以获取其链接,然后使用链接从服务器获取文件。