ExtJS4学习笔记(十三)---上传文件(upload)

最新推荐文章于 2015-08-07 17:10:38 发布

转载最新推荐文章于 2015-08-07 17:10:38 发布 · 787 阅读

ExtJS 专栏收录该内容

38 篇文章

订阅专栏

本文介绍如何使用Extjs4实现文件上传功能。通过up('form').getForm().submit()方法并设置type属性为'ajax'，可以完成文件上传，并在上传完成后处理客户端返回的JSON数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文介绍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选择框中的内容，无奈之下用了这个办法，如果大家有更好的办法，欢迎留言指正。。