Tag：Ext.form.field.File、ExtJS文件上传、PHP文件上传、move_uploaded_file

文件所在目录：ext-4.0.1/examples/form/

相关文件：file-upload.html、file-upload.js、file-upload.php

先看看界面吧

 

1、源码：file-upload.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Ext 文件上传using PHP</title>

    <!-- ExtJS -->
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <script type="text/javascript" src="../../bootstrap.js"></script>

    <!-- Shared -->
    <link rel="stylesheet" type="text/css" href="../shared/example.css" />

    <!-- Example -->
    <script type="text/javascript" src="file-upload.js"></script>
    <style type="text/css">
        .upload-icon {
            background: url('../shared/icons/fam/p_w_picpath_add.png') no-repeat 0 0 !important;
        }
        #fi-button-msg {
            border: 2px solid #ccc;
            padding: 5px 10px;
            background: #eee;
            margin: 5px;
            float: left;
        }
    </style>

</head>
<body>
    <h1>File Upload Field</h1>

    <p>This example demonstrates use of <font color="red">Ext.form.field.File</font>, a file upload field with custom rendering.</p>
    <p>The js is not minified so it is readable. See <a href="file-upload.js">file-upload.js</a>.</p>

    <h2>普通的文件上传域</h2>
    <p>
        A typical file upload field with Ext style. Direct editing of the text field cannot be done in a
        consistent, cross-browser way, so it is always read-only. The file path reported by the <code>getValue</code>
        method will 
    </p>
    <div id="fi-basic"></div>
    <div id="fi-basic-btn"></div>

    <h2>只有一个按钮</h2>
    <p>
        You can also render the file input as a button without the text field, with access to the field's value via the
        standard <tt>Ext.form.field.Field</tt> interface or by handling the <tt>fileselected</tt> event (as in this example).
    </p>
    <div id="fi-button"></div>
    <div id="fi-button-msg" style="display:none;"></div>
    <div class="x-clear"></div>

    <h2>Form 示例</h2>
    <p>
        The File field can also be used in form layouts just like any other field, with support for labeling,
        validation (the field is required in this example), empty text, etc.  This example also demonstrates
        using the <tt>buttonConfig</tt> option to provide a customized icon upload button.
    </p>
    <div id="fi-form"></div>
    <div id="fi-img"></div>
</body>
</html>
html页面上的代码很简单，主要是导入ExtJS的两个js文件和几个div标签。

2、源码：file-upload.js【重点，此文件加了一些注释和汉化而已】

Ext.require([
    'Ext.form.field.File',
    'Ext.form.Panel',
    'Ext.window.MessageBox'
]);

Ext.onReady(function(){

    //消息提示框
    var msg = function(title, msg) {
        Ext.Msg.show({
            title: title,
            msg: msg,
            minWidth: 200,
            modal: true,//模式对话框
            icon: Ext.Msg.INFO,
            buttons: Ext.Msg.OK
        });
    };

    //创建一个文件上传框
    var fibasic = Ext.create('Ext.form.field.File', {
        renderTo: 'fi-basic',//对应页面上的id为fi-basic
        width: 400,
        hideLabel: true,
        buttonText:'浏览...'
    });

    //创建一个Button
    Ext.create('Ext.button.Button', {
        text: '获取文件路径',
        renderTo: 'fi-basic-btn',
        handler: function(){
            //获取file field的值
            var v = fibasic.getValue();
            msg('你选择的文件', v && v != '' ? v : 'None');
        }
    });

    //文件上传框
    Ext.create('Ext.form.field.File', {
        renderTo: 'fi-button',
        buttonOnly: true,//仅显示按钮
        hideLabel: true,//隐藏标签
        listeners: {
            'change': function(fb, v){
                var el = Ext.get('fi-button-msg');//获取fi-button-msg的div
                el.update('<b>您选择了:</b> '+v);
                //如果fi-button-msg不可见
                if(!el.isVisible()){
                    el.slideIn('t', {
                        duration: 200,
                        easing: 'easeIn',
                        listeners: {
                            afteranimate: function() {
                                el.highlight();
                                el.setWidth(null);
                            }
                        }
                    });
                }else{
                    el.highlight();
                }
            }
        }
    });
    
    //图片，本来想用来显示上传的图片的，但是没成功
    var uploadImg = Ext.create('Ext.Img',{
        renderTo:'fi-img',
        src:'http://www.sencha.com/img/sencha-large.png'
    });

    //创建一个Form面板
    Ext.create('Ext.form.Panel', {
        renderTo: 'fi-form',
        width: 500,
        frame: true,
        title: '文件上传表单',
        bodyPadding: '10 10 0',

        //本Panel中组件的默认样式
        defaults: {
            anchor: '100%',
            allowBlank: false,//不允许为空
            msgTarget: 'side',//错误信息提示样式
            labelWidth: 50
        },

        //
        items: [{
            xtype: 'textfield',
            fieldLabel: '文件名'
        },{
            xtype: 'filefield',//文件选择框
            id: 'form-file',
            emptyText: '请选择图片',
            fieldLabel: '图片',
            name: 'photo-path',
            buttonText: '浏览...',
            //按钮参数
            buttonConfig: {
                iconCls: 'upload-icon'//按钮的样式，upload-icon是html页面中定义的一个样式
            }
        }],

        //Panel的Button
        buttons: [{
            text: '保存',
            handler: function(){
                var form = this.up('form').getForm();
                //如果form验证通过就上传图片
                if(form.isValid()){
                    form.submit({
                        url: 'file-upload.php',
                        waitTitle:'请稍候。。。',
                        waitMsg: '正在上传图片...',
                        //fp是啥？
                        success: function(fp, o) {

                            //本来想用来显示上传的图片的，但是没成功
                            uploadImg.setSrc(o.result.file);
                            uploadImg.setVisible(true);
                            msg('文件上传成功', '文件："' + o.result.file + '"已经上传到了服务器上');
                        }
                    });
                }
            }
        },{
            text: '重置',
            handler: function() {
                this.up('form').getForm().reset();
            }
        }]
    });
});

3、源码：file-upload.php（加了两行实际上传图片的代码）

<?php
sleep ( 1 );
//文件上传路径：当前文件所在目录下的upload目录下面
$p_w_picpath_path = "upload/" . $_FILES ["photo-path"] ["name"];
//将临时文件移动到指定的目录下，注意该目录必须存在，否则移动失败！
move_uploaded_file ( $_FILES ["photo-path"] ["tmp_name"], $p_w_picpath_path );
echo '{success:true, file:'.json_encode($_FILES['photo-path']['name']).'}';
?>