您的位置：首页 > Web前端 > JavaScript

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

2013-11-01 16:55 316 查看
前段时间遇到了点问题，公司采用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:'成功'}");
%>


效果图：

图一：为选择文件之前



图二：选中文件过后

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航