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

最新推荐文章于 2023-08-24 10:18:00 发布

iteye_12837

最新推荐文章于 2023-08-24 10:18:00 发布

阅读量215

点赞数

文章标签： json xhtml javascript ViewUI

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

upload.html：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 <htmlxmlns="http://www.w3.org/1999/xhtml">  
<head> 
 <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>  
 <linkrel="stylesheet"type="text/css"href="../../resources/css/ext-all.css"/>  
 <scripttype="text/javascript"src="../../bootstrap.js"></script>  
 <scripttype="text/javascript"src="../../locale/ext-lang-zh_CN.js"></script>  
 <scripttype="text/javascript"src="upload.js"></script>  
<title>MHZG.NET--upload</title> 
</head> 
 
<body> 
 <divid="upload"></div>  
</body> 
</html> 

upload.js：

Ext.onReady(function(){ 
 Ext.create('Ext.form.Panel',{  
 title:'文件上传示例--MHZG.NET',  
width:400, 
bodyPadding:10, 
 margin:'50105080',  
 frame:true,  
 renderTo:'upload',  
items:[{ 
 xtype:'filefield',  
 name:'fileName',  
 fieldLabel:'上传',  
labelWidth:50, 
 msgTarget:'side',  
 allowBlank:false,  
 anchor:'100%',  
 buttonText:'选择文件' 
}], 
 
buttons:[{ 
 text:'上传',  
 handler:function(){  
 varform=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选择框中的内容，无奈之下用了这个办法，如果大家有更好的办法，欢迎留言指正。。

iteye_12837

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJS4学习笔记(十六)---上传文件(upload)

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

扫一扫