文件上传使用EXT JS [英] file upload using EXT JS

问题描述

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

Steps to create File Upload field using Ext Js

推荐答案

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

As far as specific steps are concerned, using functionality supported in ExtJS 3x, your best best is to use this module/plugin:

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

在您的其他脚本中，头文件中的主要HTML文件（您连接到核心Ext脚本的主要HTML文件）中包含Ext JS软件包的核心脚本：

The core script comes with the Ext JS package, in your main HTML file (where you have linked to the core Ext scripts), in the head section after your other scripts put:

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

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

Sadly, there isnt a huge amount of documentation on this element of Ext JS- however for basic functionality, you can create a form with an async upload field using the below:

            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（或任何您称之为）。那么这个脚本可以处理你想要处理的文件。一个例子可能是：

What this code will do is create a new formpanel with an upload field and an upload button. When you click the upload button- the selected file will be sent to the serverside script handleupload.php (or whatever you call it). It is then this script that handles what you want to do with the file. An example of this could potentially be:

    $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数据库。要记住的是服务器端文件处理上传，就像一般的HTML表单一样...

Which would inject the file into a SQL DB. The thing to remember is the server side file handles an upload just as a normal HTML form would...

希望这有帮助！

这篇关于文件上传使用EXT JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！