使用 EXT JS 上传文件答案

【问题标题】：file upload using EXT JS使用 EXT JS 上传文件
【发布时间】：2010-03-25 11:16:49
【问题描述】：

使用 Ext Js 创建文件上传字段的步骤

【问题讨论】：

标签： extjs

【解决方案1】：

就具体步骤而言，使用 ExtJS 3x 中支持的功能，最好使用这个模块/插件：

http://dev.sencha.com/deploy/dev/examples/form/file-upload.html

核心脚本带有 Ext JS 包，在您的主 HTML 文件中（您已链接到核心 Ext 脚本），在您的其他脚本之后的 head 部分中：

<script type="text/javascript" src="nameofyourextfolder/examples/ux/fileuploadfield/FileUploadField.js"></script>

遗憾的是，没有大量关于 Ext JS 元素的文档 - 但是对于基本功能，您可以使用以下内容创建带有异步上传字段的表单：

            myuploadform= new Ext.FormPanel({
                fileUpload: true,
                width: 500,
                autoHeight: true,
                bodyStyle: 'padding: 10px 10px 10px 10px;',
                labelWidth: 50,
                defaults: {
                    anchor: '95%',
                    allowBlank: false,
                    msgTarget: 'side'
                },
                items:[
                {
                    xtype: 'fileuploadfield',
                    id: 'filedata',
                    emptyText: 'Select a document to upload...',
                    fieldLabel: 'File',
                    buttonText: 'Browse'
                }],
                buttons: [{
                    text: 'Upload',
                    handler: function(){
                        if(myuploadform.getForm().isValid()){
                            form_action=1;
                            myuploadform.getForm().submit({
                                url: 'handleupload.php',
                                waitMsg: 'Uploading file...',
                                success: function(form,action){
                                    msg('Success', 'Processed file on the server');
                                }
                            });
                        }
                    }
                }]
            })

此代码将创建一个带有上传字段和上传按钮的新表单面板。当您单击上传按钮时，选定的文件将被发送到服务器端脚本 handleupload.php（或您所称的任何名称）。然后这个脚本处理您想要对文件执行的操作。这方面的一个例子可能是：

    $fileName = $_FILES['filedata']['name'];
    $tmpName  = $_FILES['filedata']['tmp_name'];
    $fileSize = $_FILES['filedata']['size'];
    $fileType = $_FILES['filedata']['type'];
    $fp      = fopen($tmpName, 'r');
    $content = fread($fp, filesize($tmpName));
    $content = addslashes($content);
    fclose($fp);
    if(!get_magic_quotes_gpc()){
        $fileName = addslashes($fileName);
    }
    $query = "INSERT INTO yourdatabasetable (`name`, `size`, `type`, `file`) VALUES ('".$fileName."','".$fileSize."', '".$fileType."', '".$content."')";
    mysql_query($query);

这会将文件注入 SQL DB。要记住的是服务器端文件处理上传就像普通的 HTML 表单一样......

希望这会有所帮助！

【讨论】：

您是否尝试过您在此处放置的示例？
当然——我在工作实现中拥有它……你需要对你的代码进行一些调整，但它确实有效。您在哪个部分遇到了问题？
项目对象xtype : 'fileuploadfield'必须有选项name : 'filedata'的部分。由于此选项用于$_FILES 数组，而不是id : 'filedata'。
为了很好的实践可以添加，但是使用 Ext JS 你可以只设置 id 就可以了，如果没有设置名称，它在发送请求时默认为
@ErgoSummary 还请包括在db中插入图像后返回json格式的部分。

【解决方案2】：

如果您查看 www.ExtJS.com 上提供的示例，您会发现 this one。

虽然它基于标准的 HTML 文件上传 - 就像 this answer 建议的那样。

【讨论】：

【解决方案3】：

仅设置 id 将导致 $_FILES 数组名称与 id 相同。如果您需要使用其他内容，请设置名称配置选项，它会使用它。

【讨论】：

【解决方案4】：

items: {
    xtype: 'form',
    border: false,
    bodyStyle: {
        padding: '10px'
    },
    items: {
        xtype: 'multifilefield',
        labelWidth: 80,
        fieldLabel: 'Choose file(s)',
        anchor: '100%',
        allowBlank: false,
        margin: 0
    }
},

ExtJS 4.2.2 的现场演示是here

【讨论】：