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

ExtJS4学习笔记四－－图片上传

2014-05-09 16:46 423 查看

相关包文件：

commons-fileupload-1.2.1.jar

commons-io-1.4.jar

前端程序：

Html代码

<HTML>

<HEAD>

  <TITLE>Ext.form.field.File示例</TITLE>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />

  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>

  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>

  <script type="text/javascript">

    Ext.onReady(function(){

        Ext.QuickTips.init();

        var uploadForm = Ext.create('Ext.form.Panel',{

            title:'Ext.form.field.File示例',

            bodyStyle:'padding:5 5 5 5',//表单边距

            frame : true,

            height:100,

            width:300,

            renderTo :'form',

            defaults:{//统一设置表单字段默认属性

                labelSeparator :'：',//分隔符

                labelWidth : 50,//标签宽度

                width : 150,//字段宽度

                allowBlank : false,//是否允许为空

                labelAlign : 'left',//标签对齐方式

                msgTarget :'side'   //在字段的右边显示一个提示信息

            },

            items:[{

                xtype: 'filefield',

                name: 'photo',

                fieldLabel: '照片',

                anchor: '100%',

                buttonText: '选择照片...'

            }],

            buttons: [{

                text: '上传文件',

                handler: function() {

                    var form = uploadForm.getForm();

                    if(form.isValid()){

                        form.submit({

                            url: 'uploadServer.jsp',

                            waitMsg: '正在上传照片文件请稍候...',

                            success: function(fp, o) {

                                Ext.Msg.alert('提示信息', '您的照片文件 "' + o.result.file + '"已经成功上传。');

                            }

                        });

                    }

                }

            }]

        });

    });

  </script>

</HEAD>

<BODY STYLE="margin: 10px">

     <div id='form'></div>

</BODY>

</HTML>

JSP代码：

Jsp代码

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

<%@ page import="org.apache.commons.fileupload.*"%>

<%@ page import="org.apache.commons.fileupload.FileItem"%>

<%

DiskFileUpload upload = new DiskFileUpload();

upload.setHeaderEncoding("utf8");

java.util.List items = upload.parseRequest(request);

java.util.ListIterator listIterator = items.listIterator();

String fileName = "";

while(listIterator.hasNext()){

    FileItem item = (FileItem)listIterator.next();

    if(!item.isFormField()){

        fileName = item.getName();

        fileName = fileName.substring(fileName.lastIndexOf("\\")+1);//从全路径中提取文件名

    }

}

String msg = "{success:true,file:'"+fileName+"'}";

response.getWriter().write(msg);

%>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航