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

来源：互联网发布：sql server 注释编辑：程序博客网时间：2024/06/10 18:52

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