无废话ExtJs 入门教程十三[上传图片：File]

朋友炒股两个月赚了10万，我帮他推广一下公众号，把钱用来投资总比放银行连通货膨胀都跑不过里强， 硬核离职，在家炒股　，这是他每天的日志，有些经验是花钱也买不到的。

1.代码如下：

<!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>
<!--
说明：
(1)var imagebox = new Ext.BoxComponent():创建一个新的html标记。
    官方解释如下：
    This may then be added to a Container as a child item.
    To create a BoxComponent based around a HTML element to be created at render time, use the autoEl config option which takes the form of a DomHelper specification:
(2) autoEl: {style: '',tag: 'div',id: 'imageshow', html: '暂无图片'}定义这个html标记的属性，如 标记为：div，id是多少等。
    官方实例为：
    var myImage = new Ext.BoxComponent({
    autoEl: {
        tag: 'img',
        src: '/images/my-image.jpg'
        }
    });
(3)var file = new Ext.form.TextField()：创建一个新的文件上传域。 
(4)name: 'imgFile':名称，重要，因为service端要根据这个名称接收图片。
(5)inputType: 'file'：表单类型为文件类型。
(6)waitTitle: "请稍候",waitMsg: '正在上传...',：上传等待过程中的提示信息。    
(7)document.getElementById('imageshow').innerHTML = '<img style="width:150px;height:150px" src="' + action.result.path + '"/>';这个是原生态的js，把imageshow的值换成图片。
-->
</body>
</html>

其中与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.效果如下：

3.说明：

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

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