`
wang5598
  • 浏览: 112892 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Extjs+Struts2异步上传头像

阅读更多

项目中有个地方要实现用户上传头像的功能,这其实是个非常简单的功能,刚开始的时候,我的思路是采用使用Ext.Ajax来异步上传头像的,但是无论怎么实现后台都得不到文件,反复验证了后台的Struts2的代码没有错误,配置文件也没有错误,开始反思原因,经过google后发现,其实上传文件的时候用ajax是不能实现的,因为文件传递安全性方面的考虑,ajax只能将文件名传递到后台,并不能将文件本身传递给后台,要在extjs实现文件上传必须采用在form中提交的方式,不过为了实现类似于ajax的用户体验,可以在配置项中添加fileUpload:true的方式,来实现异步提交,而不必出现页面跳转的方式。废话不多说了看代码:

 

Extjs代码:

var imageform = new Ext.FormPanel({
   id: 'imageform',
   labelWidth: 80,
   labelAlign : 'right',
   border : false,
   fileUpload: true,
   bodyStyle : 'padding:10px 8px 8px 8px;',
   items:[{
    xtype: 'fieldset',
             title: '设置头像',
             collapsible: true,
             labelWidth: 69,
             collapsed: true,
             layout:'form',
             items: [{
              xtype: 'fileuploadfield',
                 id: 'upload',
                 name: 'upload',
                 emptyText: '选择相片地址',
                 fieldLabel: '上传路径',
                 buttonText: '',
                 width:440,
                 buttonCfg: {
                     iconCls: 'upload-avatar'
                 },
                 anchor : '96%'
             },{
              border:false,
                 layout:'form',
                 fieldLabel : "预览图片",     
                 items:[
                      {
                     xtype:'panel',
                     border:false,
                     layout:'column',
                     items:[{
                       xtype : 'box',     
                       id : 'browseImage',  
                       columnWidth:.35,
                       bodyStyle:'padding:10px 10px 10px 10px;',
                       autoEl : {  
                           width : 102,  
                           height : 125,  
                           tag : 'img',    
                           src : avatarurl
                       } 
                     },{
                     columnWidth:.5,
                     labelAlign :'left',
                     border:false,
                     buttonAlign:'center',
                     bodyStyle:'margin-left:10px;padding:5px',
                     items:[{
              xtype : 'label',
              fieldLabel:'',
                 html: '<ul><li>1、图片格式只能是jpg格式。</li></ul><br/>'
                     },{
              xtype : 'label',
              fieldLabel:'',
                 html: '<ul><li>2、图片大小不超过300K。</li></ul><br/>'
                    },{
              xtype : 'label',
              fieldLabel:'',
              html: '<ul><li>3、图片默认分辨率为102*125。</li></ul><br/>'
                    }] ,
                    buttons:[{
         xtype : 'button',
         fieldLabel:'',
         text:'上传头像',
         handler: function(){
           var file_path = Ext.getCmp('upload').getValue();
           var str = file_path.substr(file_path.lastIndexOf('.')+1,file_path.length);
           if(str!='JPG'&&str!='jpg'){
            Ext.Msg.alert('错误', "上传的图像只能是jpg格式!");
            return false;
           }       
           if(imageform.getForm().isValid()){
            imageform.getForm().submit({
                            url: '/SchoolManageSystem/upLoadAvatar.do',
                           success:function(form, action){  
                               var isSuc = action.result.success;
                               var message = action.result.message;  
                               var image_url = "/SchoolManageSystem"+ action.result.avatarurl;  
                              if(isSuc=='true'){
                                     Ext.Msg.alert('消息', message);
                              }else{
                                     Ext.Msg.alert('错误', message);  
                               }
                               Ext.getCmp("browseImage").getEl().dom.src=image_url;
                          },  
                          failure:function(form, action){  
                              var isSuc = action.result.success;
                              var message = action.result.message; 
                              if(isSuc=='true'){
                                   Ext.Msg.alert('消息', message);
                              }else{
                                   Ext.Msg.alert('错误', message);  
                              }
                                   Ext.getCmp("browseImage").getEl().dom.src=image_url;
                          }  
                        });
                       }
                   }
                     }
                 ]
                     }]
                  
                 }]
            }]
   }]
  })

 

struts2的配置文件:

 <package name="default" extends="json-default">
        <action name="upLoadAvatar" class="cn.action.UserinfoAction"  method="upLoadAvatar">
             <result name="success" type="json">
              <param name="ContentType">text/html</param>
              <param name="includeProperties">avatarurl,message,success</param>
            </result>
      </action>
   </package>

 

Java代码如:

private File upload;  
 private String avatarurl;
 private String uploadContentType;  
 private String uploadFileName;  

 。。。。

/**
  * 上传用户头像
  * @return
  */
 public String  upLoadAvatar() {  
    int BUFFER_SIZE = 16 * 1024;
    InputStream in = null ;
       OutputStream out = null ;
       if(upload==null){
          message = "文件不能为空";
     avatarurl = "/images/login/photo-head.jpg";
     success = false;
     return SUCCESS;
       }
    long length  = Math.round(upload.length()/1024);//文件大小,kb单位
    if(length>600){
     message = "文件大小超过300K的限制";
     avatarurl = "/images/login/photo-head.jpg";
     success = false;
     return SUCCESS;
    }
    Map session = ActionContext.getContext().getSession();
    int school_id = ( (UserInformation)session.get("ui")).getSchool_id();
    int type = ( (UserInformation)session.get("ui")).getType();
    String username = ( (UserInformation)session.get("ui")).getUsername();
    int year = Calendar.getInstance().getTime().getYear()+1900;
     String uploaddir = File.separator+"upload"+File.separator+school_id+File.separator+year+File.separator;
     String relative = "/upload/"+school_id+"/"+year+"/";
     Long timestamp = System.currentTimeMillis();
     String imageName = username + "_" +  timestamp+".jpg";
     String realaddr = ServletActionContext.getServletContext().getRealPath(uploaddir);
        File saveFile = new File(new File(realaddr), imageName);
         if (!saveFile.getParentFile().exists()) {
              saveFile.getParentFile().mkdirs();
          }
         try {
         in = new BufferedInputStream( new FileInputStream(upload), BUFFER_SIZE );
        out = new BufferedOutputStream( new FileOutputStream(saveFile),     BUFFER_SIZE );
        byte [] buffer = new byte [ BUFFER_SIZE ];
              int len = 0;
              while ((len = in.read(buffer)) > 0) {
                  out.write(buffer, 0, len);
                 out.flush();
              } 
             。。。。其他的业务代码省略

             success = true;
             message = "上传成功";
          } catch (IOException e) {
              e.printStackTrace();
          }finally {
               if ( null != in) {
                   try {
                       in.close();
                   } catch (IOException e) {
                       e.printStackTrace();
                   }
               }
               if ( null != out) {
                   try {
                       out.close();
                   } catch (IOException e) {
                       e.printStackTrace();
                   }
               }
          }
         return SUCCESS;
 }  

 

这样前台就可以传递图片到后台了,其实传递其他的文件也是相同的道理。

图片效果:

  • 描述: result
  • 大小: 54.2 KB
分享到:
评论
2 楼 zjhdreams 2015-01-23  
擦,异步还有submit,我靠,怎么学的哦
1 楼 steafler 2012-07-25  
有源码吗,上来看看呢

相关推荐

    Extjs+Struts2实现异步文件上传

    网上有些这样的例子,但是下了几个都没有跑起来,哎,希望那些发文章的人要发就发全的,别发个半生不熟的。... 现在自己整理了一个Struts2+ExtJS2实现文异步文件上传,没法上传图片无法看到效果,直接上源码吧。

    ExtJS+Struts2

    在"ExtJS+Struts2"的组合中,前端使用ExtJS进行界面设计和用户交互处理。例如,"简单增删改"功能通常会涉及到ExtJS的Grid Panel组件,它能展示数据表格,支持行操作,如添加新记录、删除现有记录以及编辑单元格内容...

    能运行的ExtJs+Struts2文件上传

    标题"能运行的ExtJs+Struts2文件上传"表明这是一个实现了文件上传功能的示例项目。在ExtJs中,可以利用其提供的FileInput组件创建一个文件选择器,用户可以选择文件并提交到服务器。Struts2则在服务器端处理文件上传...

    ExtJs + Struts2 + JSON 程序总结

    ExtJs + Struts2 + JSON 是一种常见的前端与后端数据交互的技术组合,常用于构建富客户端应用。这里我们详细探讨一下这三个技术组件以及它们如何协同工作。 首先,ExtJs 是一个JavaScript库,用于创建复杂的、用户...

    extjs+struts案例

    extjs+struts案例 extjs+struts案例

    extjs+struts2+hibernate+json登录程序

    ExtJS + Struts2 + Hibernate + JSON 登录程序是一个典型的Web开发示例,结合了前端JavaScript框架、MVC框架、持久层框架以及数据传输格式,实现了用户登录功能的前后端交互。下面将详细阐述这些技术及其在登录程序...

    Extjs+struts实现文件上传

    Extjs+struts实现文件上传 使用说明中的UploadfileAction.java中的代码要拷贝到一个JSP文件中并将url: '/rsgl/uploadfile.do',改为url: '/rsgl/jspcos.jsp',才可以正常上传

    漂亮的Extjs+struts2实现联动下拉

    ExtJS和Struts2是两种在Web开发中广泛使用的开源技术。ExtJS是一个JavaScript库,提供了丰富的用户界面组件,如数据网格、图表、表单等,用于构建富客户端应用程序。Struts2则是一个基于MVC设计模式的Java Web框架,...

    java版ExtJs+struts2做的OA

    java版ExtJs+struts2做的OA对于java开发者和学习者来说是很不错的学习资料

    @@@extjs+struts2+json plugin的例子

    在IT行业中,构建Web应用程序是一项常见的任务,而`ExtJS`、`Struts2`和`JSON`是其中的关键技术,常被用来创建交互性强、功能丰富的用户界面和高效的服务器通信。下面将详细阐述这三个技术及其结合使用的情况。 ...

    extjs+struts2+mysql

    在本项目中,"extjs+struts2+mysql" 的组合被用来构建一个基础的Web应用程序,主要功能包括增、删、改、查。这是一个常见的技术栈,用于开发交互性强、用户界面友好的企业级应用。下面我们将详细讨论这三个关键技术...

    ExtJs+struts2+hibernate+spring的图书管理系统

    ExtJs+struts2+hibernate+spring的图书管理系统,可作为毕业设计使用,供大家一起参考学习为。

    extjs+struts2结合实现

    1. **通信方式**:ExtJS通常使用Ajax技术与服务器进行异步通信,而Struts2提供了JSON结果类型,两者可以无缝对接。通过ExtJS的Ajax请求发送数据到Struts2的Action,Action处理完业务逻辑后,返回JSON格式的数据,...

    Extjs+Struts整合入门实例

    通常,ExtJS的库文件会被放置在项目的静态资源目录下,如`/WEB-INF/resources/js/`,而Struts的配置文件如struts.xml则位于`/WEB-INF/`目录中。 在Struts中,我们定义Action类来处理用户的请求。例如,可以创建一个...

    图书管理系统源码(ExtJs+struts2+hibernate+spring)

    【图书管理系统源码(ExtJs+struts2+hibernate+spring)】是一个基于Web的软件项目,它展示了如何整合多种技术来构建一个实际的应用系统。这个管理系统使用了前端框架ExtJs,后端MVC框架Struts2,持久层框架...

    extjs+struts2省市区三级联动完整示例

    在本文中,我们将深入探讨如何使用ExtJS 4和Struts2框架实现省市区三级联动的完整示例。这个示例适用于需要在Web应用程序中实现地理区域选择功能的情况,例如用户地址输入。以下是对该技术栈及其实现方法的详细说明...

    Extjs+Struts2+JDBC

    ExtJS、Struts2和JDBC是Web开发中常见的技术栈,它们的结合可以构建功能丰富的交互式Web应用。这个小例子提供了一个基于这些技术的简单增删改查(CRUD)操作的实现,对于初学者来说是一个很好的学习资源。 ExtJS是...

    extjs+struts1图书管理系统

    在"extjs+struts1图书管理系统"中,开发者可能会遇到一些关键技术点,例如如何利用ExtJS组件构建动态表格,如何使用Struts1的ActionForm和ActionMapping进行数据处理,以及如何通过Ajax技术实现前后端异步通信等。...

    extjs+struts+mysql开发的考勤系统

    《基于ExtJS+Struts+MySQL的考勤系统详解》 在信息技术日益发达的今天,企业对于高效管理的需求越来越强烈,考勤系统作为企业管理的重要组成部分,扮演着至关重要的角色。本篇文章将深入探讨一个由ExtJS、Struts和...

    Extjs+Struts2系统后台管理框架

    6. **Ajax通信**:ExtJS的Ajax组件如AjaxProxy与Struts2的Action进行交互,实现异步数据加载和提交,提高用户体验。 7. **MVC设计模式**:Struts2中的Action、Model、View三部分分别对应控制器、模型和视图,与...

Global site tag (gtag.js) - Google Analytics