使用EXT JS上传文件

Question

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

Answer 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');
                                }
                            });
                        }
                    }
                }]
            })

这段代码将做的是创建一个带有上传字段和上传按钮的新formpanel.当您单击上传按钮时,所选文件将被发送到服务器端脚本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表单一样......

希望这可以帮助!

Answer 2

如果你看一下www.ExtJS.com上提供的例子,你会发现这个例子.

虽然它基于标准的HTML文件上传 - 就像这个答案所暗示的那样.