<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--ExtJs框架开始-->
    <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/Ext/ext-all.js"></script>
    <script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
    <!--ExtJs框架结束-->
    <script type="text/javascript">
        Ext.onReady(function () {
            //初始化标签中的Ext:Qtip属性。
            Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget = 'side';
            //创建div组件
            var imagebox = new Ext.BoxComponent({
                autoEl: {
                    style: 'width:150px;height:150px;margin:0px auto;border:1px solid #ccc; text-align:center;padding-top:20px;margin-bottom:10px',
                    tag: 'div',
                    id: 'imageshow',
                    html: '暂无图片'
                }
            });
            //创建文本上传域
            var file = new Ext.form.TextField({
                name: 'imgFile',
                fieldLabel: '文件上传',
                inputType: 'file',
                allowBlank: false,
                blankText: '请浏览图片'
            });
            //提交按钮处理方法
            var btnsubmitclick = function () {
                if (form.getForm().isValid()) {
                    form.getForm().submit({
                        waitTitle: "请稍候",
                        waitMsg: '正在上传...',
                        success: function (form, action) {
                            Ext.MessageBox.alert("提示", "上传成功!");
                            document.getElementById('imageshow').innerHTML = '<img style="width:150px;height:150px" src="' + action.result.path + '"/>';
                        },
                        failure: function () {
                            Ext.MessageBox.alert("提示", "上传失败!");
                        }
                    });
                }
            }
            //重置按钮"点击时"处理方法
            var btnresetclick = function () {
                form.getForm().reset();
            }
            //表单
            var form = new Ext.form.FormPanel({
                frame: true,
                fileUpload: true,
                url: '/App_Ashx/Demo/Upload.ashx',
                title: '表单标题',
                style: 'margin:10px',
                items: [imagebox, file],
                buttons: [{
                    text: '保存',
                    handler: btnsubmitclick
                }, {
                    text: '重置',
                    handler: btnresetclick
                }]
            });
            //窗体
            var win = new Ext.Window({
                title: '窗口',
                width: 476,
                height: 374,
                resizable: true,
                modal: true,
                closable: true,
                maximizable: true,
                minimizable: true,
                buttonAlign: 'center',
                items: form
            });
            win.show();
        });
    </script>
</head>
<body>


其中与service交互用上传图片的 一般处理程序文件,源码如下:

/App_Ashx/Demo/Upload.ashx

using System;
using System.Web;
using System.IO;
using System.Globalization;

namespace HZYT.ExtJs.WebSite.App_Ashx.Demo
{
    public class Upload : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            //虚拟目录,建议写在配置文件中
            String strPath = "/Upload/Image/";
            //文件本地目录
            String dirPath = context.Server.MapPath(strPath);
            //接收文件
            HttpPostedFile imgFile = context.Request.Files["imgFile"];
            //取出文件扩展名
            String fileExt = Path.GetExtension(imgFile.FileName).ToLower();
            //重新命名文件
            String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;
            //文件上传路径
            String filePath = dirPath + newFileName;
            //保存文件
            imgFile.SaveAs(filePath);
            //客户端输出
            context.Response.Write("{success:true,path:'" + strPath + newFileName + "'}");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

2.效果如下

extjs-sctp

3.说明:

(1)上传域不光可以上传图片,还要以上传其他文件。这里我们以图片为例。

(2)在实际开发中,我们还要对图片格式,大小等进行校验,这个示例测重于上传,没有加入任何校验