web-dev-qa-db-ja.com

EXT JSを使用したファイルのアップロード

Ext Jsを使用してファイルアップロードフィールドを作成する手順

extjs
28
brindha

特定の手順に関する限り、ExtJS 3xでサポートされている機能を使用して、このモジュール/プラグインを使用するのが最善です。

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

コアスクリプトは、メインのHTMLファイル（コアExtスクリプトにリンクしている場所）、他のスクリプトを配置した後のheadセクションに、Ext JSパッケージに付属しています。

<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フォームと同じようにアップロードを処理することです...

お役に立てれば！

27
SW4

Www.ExtJS.comで利用可能な例を見ると、 this one が見つかります。

この答え が示唆するように、標準のHTMLファイルアップロードに基づいています。

7
Chau

iDのみを設定すると、$ _ FILES配列名がIDと同じになります。他の何かを使用する必要がある場合は、name configオプションを設定すると、代わりにそれが使用されます。

0
tom
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 です

0
khmurach