Question

我有Sencha Ext JS应用程序，我使用File表单字段（Ext.form.field.File）来上传文件。它工作正常，但我希望用户能够一次选择多个文件进行上传，例如在Dropbox.com上。我有另一个非Sencha站点（我直接控制HTML），我通过使用INPUT元素的multiple属性解决了这个问题：

  <input type="file" name="files" multiple>

但是，Sencha本身不支持文件上载字段中的多个文件，至少从当前版本（4.1）开始。也许可以改变Sencha为<input>元素发出的HTML输出，但我不确定如何。

Answer 1

您可以创建xtype：

Ext.define('fileupload',{
    extend: 'Ext.form.field.Text'
    ,alias: 'widget.fileupload'
    ,inputType: 'file'
    ,listeners: {
        render: function (me, eOpts) {
            var el = Ext.get(me.id+'-inputEl');
            el.set({
                size: me.inputSize || 1
            });
            if(me.multiple) {
                el.set({
                    multiple: 'multiple'
                });
            }
        }
    }
});

并以您的形式使用它：

,items: [{
        xtype: 'fileupload'
        ,vtype: 'file'
        ,multiple: true // multiupload (multiple attr)
        ,acceptMimes: ['doc', 'xls', 'xlsx', 'pdf', 'zip', 'rar'] // file types
        ,acceptSize: 2048
        ,fieldLabel: 'File <span class="gray">(doc, xls, xlsx, pdf, zip, rar; 2 MB max)</span>'
        ,inputSize: 76 // size attr
        ,msgTarget: 'under'
        ,name: 'filesToUpload[]'
    }]

请参阅githab

上的示例

Answer 2

有一个插件可能你可以使用它：http://www.sencha.com/forum/showthread.php?205576-File-upload-with-drag-amp-drop-support&highlight=upload

演示：http://harrydeluxe.github.com/extjs-ux/example/upload/upload.html

如何获取Sencha文件上传字段以接受多个文件

2 个答案: