• Extjs formPanel 显示图片 + 上传


    弄了一天的图片上传,显示,通过网上找资料终于弄好了。现在整理一下,贴到这,下次要再用到也方便查询了。。。

    显示代码打印01     //uploadFile.js  

    02   

    03    Ext.onReady(function() {  

    04   

    05  var fileForm = new Ext.form.FormPanel({  

    06   title : "",  

    07   renderTo : "fileUpload",  

    08   fileUpload : true,  

    09   layout : "form",  

    10   id : "fileUploadForm",  

    11   items : [{  

    12      id : 'upload',  

    13      name : 'upload',  

    14      inputType : "file",  

    15      fieldLabel : '上传图片',  

    16      xtype : 'textfield',  

    17      anchor : '40%' 

    18   

    19     }, {  

    20         

    21      xtype : 'box',  

    22      id : 'browseImage',  

    23      fieldLabel : "预览图片",  

    24      autoEl : {  

    25       width : 300,  

    26       height : 350,  

    27       tag : 'img',  

    28       // type : 'image',  

    29       src : Ext.BLANK_IMAGE_URL,  

    30       style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);',  

    31       complete : 'off',  

    32       id : 'imageBrowse' 

    33      }  

    34   

    35     }],  

    36        

    37     //form事件  

    38   listeners : {  

    39    'render' : function(f) {  

    40     //  

    41     this.form.findField('upload').on('render', function() {  

    42      //通過change事件,图片也动态跟踪选择的图片变化  

    43      Ext.get('upload').on('change',  

    44        function(field, newValue, oldValue) {  

    45   

    46         //得到选择的图片路径  

    47         var url = 'file://' 

    48           + Ext.get('upload').dom.value;  

    49              

    50        // alert("url = " + url);  

    51         //是否是规定的图片类型  

    52         if (img_reg.test(url)) {  

    53   

    54          if (Ext.isIE) {  

    55           var image = Ext.get('imageBrowse').dom;  

    56           image.src = Ext.BLANK_IMAGE_URL;// 覆盖原来的图片  

    57           image.filters  

    58             .item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;  

    59   

    60          }// 支持FF  

    61          else {  

    62           Ext.get('imageBrowse').dom.src = Ext  

    63             .get('upload').dom.files  

    64             .item(0).getAsDataURL()  

    65          }  

    66         }  

    67        }, this);  

    68     }, this);  

    69    }  

    70   },  

    71   buttons : [{  

    72      text : "提交",  

    73      name : "submit",  

    74      handler : submit  

    75     }]  

    76  });  

    77   

    78  // 上传图片类型  

    79  var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/  

    80   

    81 });  

    82   

    83 //上傳圖片到服务器,  

    84 function submit() {  

    85  Ext.getCmp("fileUploadForm").getForm().submit({  

    86   

    87     url : "uploadAction.action",  

    88     method : "POST",  

    89     success : function(form, action) {  

    90      alert("success");  

    91     },  

    92     failure : function(form, action) {  

    93      alert("failure");  

    94     }  

    95    });  

    96 }


    传入后台处理,使用struts2


    显示代码打印001 package com.cocobra.action;  

    002   

    003 import java.io.*;  

    004 import java.util.Date;  

    005 import java.util.UUID;  

    006   

    007 import org.apache.struts2.ServletActionContext;  

    008   

    009 import com.opensymphony.xwork2.ActionSupport;  

    010   

    011   

    012 public class UploadAction extends ActionSupport {  

    013   

    014  /**  

    015   *   

    016   */ 

    017  private static final long serialVersionUID = 1L;  

    018  private File upload;  

    019  private String uploadContentType;  

    020     

    021  private String uploadFileName;   //fileName 前面必須和uplaod一致,不然找不到文件  

    022     

    023  public File getUpload() {  

    024   return upload;  

    025  }  

    026   

    027  public void setUpload(File upload) {  

    028   this.upload = upload;  

    029  }  

    030   

    031  public String getUploadContentType() {  

    032   return uploadContentType;  

    033  }  

    034   

    035  public void setUploadContentType(String uploadContentType) {  

    036   this.uploadContentType = uploadContentType;  

    037  }  

    038   

    039  public String getUploadFileName() {  

    040   return uploadFileName;  

    041  }  

    042   

    043  public void setUploadFileName(String uploadFileName) {  

    044   this.uploadFileName = uploadFileName;  

    045  }  

    046   

    047  // 上传文件的文件名  

    048     

    049   

    050  private String getFileExp(String name) {  

    051   int pos = name.lastIndexOf(".");  

    052   

    053   return name.substring(pos);  

    054  }  

    055     

    056  private static final int BUFFER_SIZE = 16 * 1024;  

    057     

    058  public String execute() throws Exception{  

    059     

    060   Date d = new Date();  

    061      

    062   System.out.println("uploadFileName = "+this.uploadFileName);  

    063      

    064   //upload --  wapps 下面的文件夹,用来存放图片  

    065   String toSrc = ServletActionContext.getServletContext().getRealPath("upload")+"/"+d.getTime()+getFileExp(this.uploadFileName);  //使用時間戳作為文件名  

    066     

    067   System.out.println("toFile= "+toSrc);  

    068      

    069   File toFile = new File(toSrc);  

    070     

    071      

    072   writeFile(this.upload,toFile);  

    073      

    074   return SUCCESS;  

    075  }  

    076   

    077   

    078  private static void writeFile(File src, File dst) {  

    079      

    080   System.out.println(" == 文件寫入 == ");  

    081   try {  

    082    InputStream in = null;  

    083    OutputStream out = null;  

    084    try {  

    085       

    086     in = new BufferedInputStream(new FileInputStream(src),  

    087       BUFFER_SIZE);  

    088     out = new BufferedOutputStream(new FileOutputStream(dst),  

    089       BUFFER_SIZE);  

    090     byte[] buffer = new byte[BUFFER_SIZE];  

    091     while (in.read(buffer) > 0) {  

    092      out.write(buffer);  

    093     }  

    094    } finally {  

    095     if (null != in) {  

    096      in.close();  

    097     }  

    098     if (null != out) {  

    099      out.close();  

    100     }  

    101    }  

    102   } catch (Exception e) {  

    103    e.printStackTrace();  

    104   }  

    105      

    106   System.out.println("写入成功!");  

    107 }  

    108 }

    struts2中的struts.xml 配置

    显示代码打印1 <action name="uploadAction" class="com.cocobra.action.UploadAction" >   

    2      <interceptor-ref name="fileUpload">   

    3      <!--拦截器strut2自带的, 指定上传文件的格式,如果不符合规定,将会自动拦截下来 --> 

    4   <param name="allowedTypes">image/bmp,image/png,image/gif,image/jpeg,image/jpg</param>  

    5   <param name="maximumSize">20000000000</param>   

    6  </interceptor-ref>  

    7     <interceptor-ref name="defaultStack" />   

    8     <result name ="success" >/index.jsp</result >   

    9 </action>

     

  • 相关阅读:
    关于 JAVA 中使用 Preferences 读写注册表时要注意的地方
    VS2010编译以前版本工程时 ERROR CVT1100:duplicate resource,type:MANIFEST解决办法
    在博客园安家了,同时献上刚汉化的 Code Snippet 插件!
    安装mariadb
    路飞学城部署方法
    配置supervisor工具
    使用uwsgi启动django项目
    nginx访问日志和压测命令
    nginx学习
    虚拟环境之virtualenvwrapper
  • 原文地址:https://www.cnblogs.com/hannover/p/1930979.html
Copyright © 2020-2023  润新知