您的位置：首页 > Web前端 > JavaScript

ExtJS4学习---上传文件(upload)

2014-08-12 11:30 211 查看

本文介绍Extjs4文件上传示例，Extjs4中，主要使用up('form').getForm().submit()方法来实现文件的上传，在submit方法中，指定其type属性,这点很重要，如果不指定，那么在上传完成后的处理中，除非服务端不返回数据，否则客户端就会报错。实例代码如下：

upload.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<script type="text/javascript" src="../../bootstrap.js"></script>

<script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>

<script type="text/javascript" src="upload.js"></script>

<title>MHZG.NET--upload</title>

</head>

<body>

<div id="upload"></div>

</body>

</html>

upload.js：

Ext.onReady(function(){

    Ext.create('Ext.form.Panel', {

        title: '文件上传示例--MHZG.NET',

        width: 400,

        bodyPadding: 10,

        margin:'50 10 50 80',

        frame: true,

        renderTo: 'upload',

        items: [{

            xtype: 'filefield',

            name: 'fileName',

            fieldLabel: '上传',

            labelWidth: 50,

            msgTarget: 'side',

            allowBlank: false,

            anchor: '100%',

            buttonText: '选择文件'

        }],

        buttons: [{

            text: '上传',

            handler: function() {

                var form = this.up('form').getForm();

                if(form.isValid()){

                    form.submit({

                        url: 'upload.asp',

                        type:'ajax',

                        waitMsg: '正在保存文件...',

                        success: function(fp, o) {

                          // Ext.Msg.alert('提示信息', '文件成功上传,文件名字为：'+o.result.file);

                          Ext.Msg.show({

                            title:'提示信息',

                            msg:'文件上传成功<br>上传文件名为：'+o.result.file,

                            minWidth:200,

                            modal:true,

                            buttons:Ext.Msg.OK

                          })

                          form.findField('fileName').setRawValue('');

                        }

                    });

                }

            }

        }]

    });

});

服务端文件upload.asp的内容就不写了，由于在文件中用到了各种无组件上传代码，所以比较杂乱，注意一点就可以，在任何类型的服务端处理文件中，在处理完上传之后，给客户端返回一段JSON，客户端就可以通知客户上传完成。服务端处理完上传之后返回的JSON字符串为如下类型：{success:true,file:"""&fileName&"""}，JSON字符串可以任意组合，这里的fileName为上传后文件地址+文件名（/UploadFile/2011830.gif），以便于客户端进行其他操作。

最后，在代码中用到了form.findField('fileName').setRawValue('');，这句是清空file选择框，因为用form.reset();根本无法清除file选择框中的内容，无奈之下用了这个办法，如果大家有更好的办法，欢迎留言指正。。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： extjs4

相关文章推荐

新的分享

章节导航