日期:2014-05-16  浏览次数:20420 次

extjs4,spring mvc3上传文件
  本文讲解下extjs4结合spring mvc3的注解完成上传文件的例子。

1 页面文件
   <!-- Ext JS Files -->
<link rel="stylesheet" type="text/css" href="/extjs4-file-upload-spring/extjs/resources/css/ext-all.css" />
    <script type="text/javascript" src="/extjs4-file-upload-spring/extjs/bootstrap.js"></script>

<!-- file upload form -->
<script src="/extjs4-file-upload-spring/js/file-upload.js"></script>

</head>
<body>

Click on "Browse" button (image) to select a file and click on Upload button


<div id="fi-form" style="padding:25px;"></div>
</body>

2 EXTjs的文件
   Ext.onReady(function(){

    Ext.create('Ext.form.Panel', {
        title: 'File Uploader',
        width: 400,
        bodyPadding: 10,
        frame: true,
        renderTo: 'fi-form',   
        items: [{
            xtype: 'filefield',
            name: 'file',
            fieldLabel: 'File',
            labelWidth: 50,
            msgTarget: 'side',
            allowBlank: false,
            anchor: '100%',
            buttonText: 'Select a File...'
        }],

        buttons: [{
            text: 'Upload',
            handler: function() {
                var form = this.up('form').getForm();
                if(form.isValid()){
                    form.submit({
                        url: 'upload.action',
                        waitMsg: 'Uploading your file...',
                        success: function(fp, o) {
                            Ext.Msg.alert('Success', 'Your file has been uploaded.');
                        }
                    });
                }
            }
        }]
    });

});

3 上传文件的bean