Extjs 显示图片 + 文件上传

最新推荐文章于 2019-07-03 15:08:44 发布

zhaoqiliang527

最新推荐文章于 2019-07-03 15:08:44 发布

阅读量1.8k

点赞数

分类专栏： ExtJs UI设计文章标签： extjs upload string function buffer struts

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

版权

ExtJs 同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

UI设计

40 篇文章 0 订阅

订阅专栏

//upFile.js

Ext.onReady(function() {

var fileForm = new Ext.form.FormPanel({
   title : "",
   renderTo : "fileUpload",
   fileUpload : true,
   layout : "form",
   id : "fileUploadForm",
   items : [{
      id : 'upload',
      name : 'upload',
      inputType : "file",
      fieldLabel : '上传图片',
      xtype : 'textfield',
      anchor : '40%'

     }, {

      xtype : 'box',
      id : 'browseImage',
      fieldLabel : "预览图片",
      autoEl : {
       width : 300,
       height : 350,
       tag : 'img',
       // type : 'image',
       src : Ext.BLANK_IMAGE_URL,
       style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);',
       complete : 'off',
       id : 'imageBrowse'
      }

     }],
   listeners : {
    'render' : function(f) {
     //
     this.form.findField('upload').on('render', function() {
      //通過change事件
      Ext.get('upload').on('change',
        function(field, newValue, oldValue) {

         var url = 'file://'
           + Ext.get('upload').dom.value;

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

         if (img_reg.test(url)) {

          if (Ext.isIE) {
           var image = Ext.get('imageBrowse').dom;
           image.src = Ext.BLANK_IMAGE_URL;// 覆盖原来的图片
           image.filters
             .item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;

          }// 支持FF
          else {
           Ext.get('imageBrowse').dom.src = Ext
             .get('upload').dom.files
             .item(0).getAsDataURL()
          }
         }
        }, this);
     }, this);
    }
   },
   buttons : [{
      text : "提交",
      name : "submit",
      handler : submit
     }]
});

// 上传图片类型,在前台的拦截
var img_reg = //.([jJ][pP][gG]){1}$|/.([jJ][pP][eE][gG]){1}$|/.([gG][iI][fF]){1}$|/.([pP][nN][gG]){1}$|/.([bB][mM][pP]){1}$/

});

//上傳圖片
function submit() {
Ext.getCmp("fileUploadForm").getForm().submit({

     url : "uploadAction.action",
     method : "POST",
     success : function(form, action) {
      alert("success");
     },
     failure : function(form, action) {
      alert("failure");
     }
    });
}

package com.cocobra.action;

import java.io.*;
import java.util.Date;
import java.util.UUID;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

public class UploadAction extends ActionSupport {

/**
*
*/
private static final long serialVersionUID = 1L;
private File upload;
private String uploadContentType;

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

public File getUpload() {
return upload;
}

public void setUpload(File upload) {
this.upload = upload;
}

public String getUploadContentType() {
return uploadContentType;
}

public void setUploadContentType(String uploadContentType) {
this.uploadContentType = uploadContentType;
}

public String getUploadFileName() {
return uploadFileName;
}

public void setUploadFileName(String uploadFileName) {
this.uploadFileName = uploadFileName;
}

// 上传文件的文件名

private String getFileExp(String name) {
int pos = name.lastIndexOf(".");

   return name.substring(pos);
}

private static final int BUFFER_SIZE = 16 * 1024;

public String execute() throws Exception{

   Date d = new Date();

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

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

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

   File toFile = new File(toSrc);


   writeFile(this.upload,toFile);

   return SUCCESS;
}

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

   System.out.println(" == 文件寫入 == ");
   try {
    InputStream in = null;
    OutputStream out = null;
    try {

     in = new BufferedInputStream(new FileInputStream(src),
       BUFFER_SIZE);
     out = new BufferedOutputStream(new FileOutputStream(dst),
       BUFFER_SIZE);
     byte[] buffer = new byte[BUFFER_SIZE];
     while (in.read(buffer) > 0) {
      out.write(buffer);
     }
    } finally {
     if (null != in) {
      in.close();
     }
     if (null != out) {
      out.close();
     }
    }
   } catch (Exception e) {
    e.printStackTrace();
   }

   System.out.println("写入成功！");
}
}

// strtus2.xml配置

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd ">

<param name="allowedTypes">image/bmp,image/png,image/gif,image/jpeg,image/jpg</param>
     <param name="maximumSize">20000000000</param>
    </interceptor-ref>
     <interceptor-ref name="defaultStack" />

        <result name="success">/displayEmpInfo.jsp</result>
   </action>

   </package>
</struts>

//在IE8里面要记得改安全设置，不然不能在IE8里面显示图片。。。把将文件上载到服务器时包含本目录，设置为启动，就可以了。。。