ExtJs学习篇---文件上传篇

来源：互联网发布：幼儿园美工作品袋编辑：程序博客网时间：2024/06/05 13:30

前段时间遇到了点问题，公司采用Spring+Hibernate+dwr+extjs这样的结构进行了开发，由于我刚开始没有怎么进出过这中设计模式，基本上所有的页面都是边学边问才做出来的，虽然里面很多的东西都是封装好了，直接拿来就可以用。没有进行过封装的Ext是不能直接使用我们底层写好的的dwr方法的。

在一个页面的设计中需要用到文件的上传，如果不是用EXt进行页面的开发的话我也不会来学习怎么用！因为他跟以前我写的那些还有那么点点的差别。下面我们就用代码说话嘛！

做了一个简单的例子。只是实现了这个功能而已！

页面的代码：

<html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=gbk">        <title>04.form</title>        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>        <script type="text/javascript" src="../../ext-all.js"></script>        <script type="text/javascript">Ext.onReady(function(){    var form = new Ext.form.FormPanel({        labelAlign: 'right',        title: 'form',        labelWidth: 50,        frame:true,        fileUpload: true,        url: '09_01.jsp',        width: 280,        items: [{            xtype: 'textfield',            fieldLabel: '文本框',            name: 'file',            inputType: 'file'        }],        buttons: [{            text: '提交',            handler: function() {                form.getForm().submit({                    success: function(form, action){                        Ext.Msg.alert('信息', action.result.msg);                    },                    failure: function(){                        Ext.Msg.alert('错误', '失败');                    }                });            }        }]    });    form.render("form");});        </script>    </head>    <body>        <script type="text/javascript" src="../examples.js"></script>        <div id="form" style="margin:100px;"></div>    </body></html>

后台的代码：

<%@ page import="org.apache.commons.fileupload.*" %><%@ page import="java.util.List" %><%@ page import="java.util.Iterator" %><%@ page import="java.io.File" %><%@ page contentType="text/html;charset=utf-8"%><%    request.setCharacterEncoding("UTF-8");    response.setCharacterEncoding("UTF-8");    String temp=getServletContext().getRealPath("/")+"temp";    //临时目录    String loadpath=getServletContext().getRealPath("/")+"dir"; //上传文件存放目录    DiskFileUpload fu = new DiskFileUpload();    fu.setSizeMax(1*1024*1024); // 设置允许用户上传文件大小,单位:字节    fu.setSizeThreshold(4096);  // 设置最多只允许在内存中存储的数据,单位:字节    fu.setRepositoryPath(temp); // 设置一旦文件大小超过getSizeThreshold()的值时数据存放在硬盘的目录    //开始读取上传信息    List fileItems = fu.parseRequest(request);    Iterator iter = fileItems.iterator(); // 依次处理每个上传的文件    while (iter.hasNext()) {        FileItem item = (FileItem) iter.next();// 忽略其他不是文件域的所有表单信息        if (!item.isFormField()) {            String name = item.getName();//获取上传文件名,包括路径            name = name.substring(name.lastIndexOf("\\")+1);//从全路径中提取文件名            // out.println(name);            long size = item.getSize();            if ((name == null || name.equals("")) && size == 0)                continue;            System.out.println(item.getName() + "    Size=" + item.getSize() + "<br>");//输出上传文件信息            //File fNew= new File(loadpath, name);            //item.write(fNew);        }    }    response.getWriter().print("{success:true,msg:'成功'}");%>

效果图：

图一：为选择文件之前

图二：选中文件过后