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

最新推荐文章于 2024-03-15 08:56:45 发布

zhaoqiliang527

最新推荐文章于 2024-03-15 08:56:45 发布

阅读量4.2k

点赞数

分类专栏： ExtJs4.0 ExtJs JS 文章标签： extjs upload function json file ajax

本文链接：https://blog.csdn.net/zhaoqiliang527/article/details/6733313

版权

ExtJs 同时被 3 个专栏收录

61 篇文章 0 订阅

订阅专栏

50 篇文章 0 订阅

订阅专栏

ExtJs4.0

22 篇文章 1 订阅

订阅专栏

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

zhaoqiliang527

关注

0
点赞
踩
2

收藏

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

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

扫一扫

专栏目录