EXTJS File控件+common FileUpload上传文件

1. 在jsp或html导入如下样式和js文件

<link type="text/css" rel="stylesheet" href="ext/resources/css/ext-all.css"/>//extjs的样式
<link rel="stylesheet" type="text/css" href="ext/examples/ux/fileuploadfield/css/fileuploadfield.css"/>//上传文件的样式
<link type="text/css" rel="stylesheet" href="css/css.css"/>//自定义样式
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>//extjs必须导入的js文件
<script type="text/javascript" src="ext/ext-all.js"></script>//extjs必须导入的js
<script type="text/javascript" src="ext/examples/ux/fileuploadfield/FileUploadField.js"></script>//EXTJS上传控件所需js文件
<script type="text/javascript" src="upload.js" charset="gb2312"></script>//本地js文件 自定义 下面给出代码

2.uoload.js代码

Ext.onReady(function() {

 Ext.QuickTips.init();
    //信息提示函数
 var msg = function(title, msg) {
  Ext.Msg.show({
     title : title,
     msg : msg,
     minWidth : 200,
     modal : true,
     icon : Ext.Msg.INFO, //样式
     buttons : Ext.Msg.OK //按钮 extjs封装的
    });
 };

//上传表单
 var fp = new Ext.FormPanel({
    renderTo : Ext.getBody(), //渲染到页面body标签中
    fileUpload : true,//上传文件必须设为true
    width : 500,
    frame : true,
    title : '<div style="color:black">File Upload Form</div>', //标题描述及样式
    autoHeight : true,
    labelWidth : 50,
    defaults : {
     anchor : '95%',
     allowBlank : false, //不允许为空
     msgTarget : 'side'//验证提示显示在右边
    },
    items : [{
       xtype : 'textfield',
       fieldLabel : 'FileName',
       id : 'filename'
      }, {
       xtype : 'fileuploadfield', //文件类型文本框
       id : 'form-file',
       emptyText : 'Select a file',
       fieldLabel : 'FilePath',
       name : 'uploadfile',
       buttonText : '',
       buttonCfg : {
        iconCls : 'upload-icon'
       },
       listeners : {
        'fileselected' : function() { //监听选中文件的事件，将文件名显示在上方的文本框上
         //获取文件名
         var a = this.value.split('\\');
         var len = a.length;
         Ext.getCmp('filename').setValue(a[len - 1]);//截取字符串获得文件名
         }
       }
      }],
    buttons : [{
     text : '提交',
     handler : function() {
      if (fp.getForm().isValid()) {
       fp.getForm().submit({
        url : 'UpLoadServlet.do',//表单提交处理的servlet
        waitMsg : '正在上传，请等待',
        success : function(fp, action) { //action为返回json 通过action.result.*获取
        //调用MSG函数显示上传信息
         msg('Success',action.result.msg);
        },
        failure:function(fp, action) {
         msg('Faile',action.result.msg);
             }
       });
      }
     }
    }, {
     text : '重置',
     handler : function() {
      fp.getForm().reset();
     }
    }]
   });
});

3. 后台代码 通过servlet实现

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

public class UpLoadServlet extends HttpServlet {

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html; charset=gbk");
        PrintWriter out = response.getWriter();
        java.text.SimpleDateFormat formatter = new java.text.SimpleDateFormat("yyyyMMddHHmmssSSS");
  java.util.Date currentTime = new java.util.Date();//得到当前系统时间
  String str_date1 = formatter.format(currentTime); //将日期时间格式化
  String date2 = str_date1.toString(); //将Date型日期时间转换成字符串形式
        try {
            DiskFileItemFactory factory = new DiskFileItemFactory();//获取文件工厂对象
            ServletFileUpload sevletFileUpload = new ServletFileUpload(factory);//通过工厂生产出FileUpload对象
            sevletFileUpload.setHeaderEncoding("GBK");//设置为中文
            // 设置允许5用户上传文件大小,单位:字节，这里设为300kb

            sevletFileUpload.setSizeMax(300 * 1024 * 1024);
            // 设置最多只允许在内存中存储的数据,单位:字节
            factory.setSizeThreshold(4096);
            // 设置一旦文件大小超过getSizeThreshold()的值时数据存放在硬盘的目录（下面为服务器端tomcat路径）
            factory.setRepository(new File(request.getSession().getServletContext().getRealPath("/")));
            // 解析request，获取文件集合 FileItem类型 
            List fileItems = sevletFileUpload.parseRequest(request);
            // 依次处理每个上传的文件
            Iterator iter = fileItems.iterator();
              while (iter.hasNext()) {
                FileItem item = (FileItem) iter.next();//获取其中一个文件
                     if (!item.isFormField()) {//如果不是文本域（此处由于页面只要一个文件域和文本框，所以指文件域）
                     long size = item.getSize();//文件大小
                    String filename=item.getName();//表单name属性
                    filename=request.getSession().getServletContext().getRealPath("/")+System.currentTimeMillis()+filename;//此处为拼接tomcat路径和文件名
                    String contentType=item.getContentType();//获取contentType
                    FileOutputStream fos=new FileOutputStream(filename);//获得输出流
                    if(item.isInMemory()){//如果缓存中有此文件
                     fos.write(item.get());//直接输出
                    }else{
                     InputStream is=item.getInputStream();//通过FileItem获得输入流
                     byte[]buffer=new byte[1024];
                     int length=0;
                     while ((length=is.read(buffer))!=-1) {
                      fos.write(buffer, 0, length);
      }
                     is.close();
                     fos.close();
                     
                    }
                }else{//如果是文本域 打印出表单中文本域的name属性和对应的值
                 System.out.println(item.getFieldName());
                 System.out.println(item.getString("GBK"));
                }
            }
        }catch(Exception e){
         e.printStackTrace();
        }
        out.print("{'success':true,'msg':'OK'}");//提示信息 extjs文件会通过eval函数转为json对象
    }
}