ext.net 开发学习之FileUploadField与Image （四）

Asp.net 很强大，所以子承父业 Ext.net功能也很强大（只聊ext.net强大的一面）

之前做电子商务网站，后台有用过图片浏览并显示的效果。当时用的是ajax……因为ext.net已经封装了ext.js。那就入乡随俗……

效果如下

单击“选择” 效果

上传，清楚同样是无刷新页面，这个效果用户体验会好些……

前台代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImgUpLoad.aspx.cs" Inherits="FumaCRM_BS.WebUI.ExtTest.ImgUpLoad" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %><!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 runat="server">    <title></title></head><body>    <form id="form1" runat="server">    <div>        <ext:ResourceManager ID="ResourceManager1" runat="server">        </ext:ResourceManager>        <ext:Viewport ID="vpPersonImg" runat="server">            <Items>                <ext:ColumnLayout runat="server">                    <Columns>                        <ext:LayoutColumn ColumnWidth="0.25">                            <ext:Image ID="PersonImg" FieldLabel="个人照片" runat="server" Width="200" Height="210">                            </ext:Image>                        </ext:LayoutColumn>                        <ext:LayoutColumn ColumnWidth="0.75">                            <ext:Panel runat="server" Border="false">                                <Items>                                    <ext:FileUploadField ID="UploadImage" runat="server" ButtonOnly="true" ButtonText="选择"                                        Icon="ImageAdd">                                        <Listeners>                                            <FileSelected Handler="Ext.net.DirectMethods.GetPersonImg();" />                                        </Listeners>                                    </ext:FileUploadField>                                    <ext:Button ID="btnClearImg" runat="server" Icon="ImageDelete" Text="清空">                                        <Listeners>                                            <Click Handler="Ext.net.DirectMethods.ClearPersonImg(); " />                                        </Listeners>                                    </ext:Button>                                </Items>                            </ext:Panel>                        </ext:LayoutColumn>                    </Columns>                </ext:ColumnLayout>            </Items>        </ext:Viewport>        <ext:Hidden ID="hidValue" runat="server">        </ext:Hidden>    </div>    </form></body></html>

后台代码

  ///<summary>/// 获取图片///</summary>        [DirectMethod]public void GetPersonImg()        {if (this.UploadImage.HasFile)            {string strImg = string.Empty;if (UploadImage.PostedFile != null && UploadImage.PostedFile.ContentLength > 0)                {                    strImg = this.UploadImage.PostedFile.FileName;string strExt = System.IO.Path.GetExtension(strImg).ToLower();if (strExt != ".jpg" && strExt != ".jepg" && strExt != ".bmp" && strExt != ".gif")                    {                        Common.CommonMethod.Show("提示", "抱歉仅支持.jpg，jepg，bmp，gif", MessageBox.Icon.WARNING);return;                    }                }                fileUpload(strImg);            }else            {                Common.CommonMethod.Show("提示", "请选择照片", MessageBox.Icon.NONE);            }        }///<summary>/// 清除图片///</summary>        [DirectMethod]public void ClearPersonImg()        {            PersonImg.ImageUrl =string.Empty;            hidValue.Text = string.Empty;        } #region 图片处理///<summary>/// 上传图片///</summary>///<param name="filepath">上传图片的完整路径，包括文件名   </param>        public void fileUpload(string strFilePath)        {string strPictureName = string.Empty;//上传后的图片名，以当前时间为文件名，确保文件名没有重复                       if (!string.IsNullOrEmpty(strFilePath))            {try                {string strFileName = System.IO.Path.GetFileName(strFilePath);// System.IO.Path.GetExtension(strFilePath).ToLower();                    strPictureName = DateTime.Now.Ticks.ToString() + strFileName;string strMapPath = Server.MapPath("~/Resource/Images/employeePhoto/");string strPath = strMapPath + strPictureName;                    UploadImage.PostedFile.SaveAs(strPath);                    hidValue.Text = "/Resource/Images/employeePhoto/" + strPictureName;                    PersonImg.ImageUrl = hidValue.Text;                    FileStream fs = File.OpenRead(strPath);byte[] content = new byte[fs.Length];                    fs.Read(content, 0, content.Length);                    fs.Close();// content二进制赋值 ;                  }catch (Exception ex)                {                    Response.Write(ex);                }            }else            {string path = Directory.GetCurrentDirectory();// 用于获得应用程序当前工作目录                Common.CommonMethod.Show("提示", "请选择照片", MessageBox.Icon.NONE);            }        }///<summary>/// 获取二进制转成图片///</summary>///<param name="tempbyte"></param>        private void ConvertByteToImage(byte[] tempbyte)        {string strPicName = DateTime.Now.Ticks.ToString() + ".jpg";            MemoryStream ms = new MemoryStream();string path = Server.MapPath("~/Resource/Images/employeePhoto/" + strPicName);            FileStream fs = new FileStream(path, FileMode.Append);            fs.Write(tempbyte, 0, tempbyte.Length);            fs.Close();            hidValue.Text = "/Resource/Images/employeePhoto/" + strPicName;            PersonImg.ImageUrl = hidValue.Text;        }

#endregion

上面显示我都是aspx页面上展示的，ext.net同样可以直接cs代码生成如下（大致写了下）

  #region 后台生成imgpublic static  Ext.Net.ColumnLayout CreateImg()        {            Ext.Net.ColumnLayout layList = new ColumnLayout();             LayoutColumn layRight = new LayoutColumn();            LayoutColumn layLeft = new LayoutColumn();            layLeft.ColumnWidth = 0.25M;             layLeft.Items.Add(CreateControls.CreateImage("PersonImg", "个人照片", 200, 250));            Ext.Net.Panel panelLayRight = new Ext.Net.Panel(){Border=false};            FileUploadField fileUp = new FileUploadField() { ID = "UploadImage", ButtonOnly = true, ButtonText = "选择", Icon = Icon.ImageAdd };            fileUp.Listeners.FileSelected.Handler = "Ext.net.DirectMethods.GetPersonImg();";            Ext.Net.Button btn = new Ext.Net.Button() { ID = "btnClearPersonImg", Icon = Icon.ImageDelete, Text = "清空" };            btn.Listeners.Click.Handler = "Ext.net.DirectMethods.ClearPersonImg(); ";

            panelLayRight.Items.Add(fileUp);            panelLayRight.Items.Add(btn);            layRight.Items.Add(panelLayRight);            layList.Columns.Add(layLeft);            layList.Columns.Add(layRight);return layList;        }

#endregion

CreateControl类#region 创建Image///<summary>/// 创建Image///</summary>///<param name="srID">id</param>///<param name="strFieldLable">FieldLable</param>///<param name="height">高度</param>///<param name="width">宽度</param>///<returns></returns>        public static Image CreateImage(string srID,string strFieldLable,int height,int width)        {            Image img = new Image();            img.ID = srID;            img.FieldLabel = strFieldLable;            img.Height = height;            img.Width = width;return img;        }#endregion

效果同样精彩

目前我有个瓶颈，做的不好。就是每次“选择”按钮，我是把图片上传到服务器上后image才显示的。这样会造成很多没用的图片到服务器中！

园中有朋友如果有好的方法还请赐教

谢谢

作者：PEPE
出处：http://pepe.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

ext.net 开发学习之FileUploadField与Image （四）相关推荐

ext.net 开发学习之复杂模板板块（叁）
一直在纳闷十一放假七天,另一个更重要的节日春节为什么也只有七天!!!没休息够就要奔向远方-- 言归正传,之前我们叁一直在捣鼓着ext.net.经过近两周的开发,大体完成了部分效果.现在和大家分 ...
ext.net 开发学习之TabPanel （二）
昨天捣鼓好了页面框架,得到了园友的帮忙,在这里说声 "谢谢"-- :) 框架好了,当然要实现效果.cs的效果如下,当然我们这边开发bs也要求这样.把需求的效果贴出: 大致可以看 ...
Liferay开发学习（1）
Liferay 6.1开发学习(一):环境搭建一.资源准备以下资源内容可以在Liferay的官方网站下载,1-3在http://www.liferay.com/downloads/liferay- ...
Unity 创建2D平台游戏开发学习教程
了解如何使用C#在Unity中创建您的第一款2D平台游戏你会学到什么使用Unity创建2D奥运会使用可脚本化的对象和单一模式使用良好的编程实践创造武器和射弹使用可脚本化的对象和委托模式创建 ...
C#和Unity编码和游戏开发学习教程
MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz,2 Ch 语言:英语+中英文字幕(根据原英文字幕机译更准确) |时长:110节课(26小时25分钟)|大小解压后:18.6 ...
初级java开发学习路线_成为初级全栈Web开发人员的10分钟路线图
初级java开发学习路线 So you have started your journey into the world of web development. But what do you lea ...
ios开发学习-手势交互（Gesture）效果源码分享
qianqianlianmeng ios开发学习-手势交互(Gesture)效果源码分享 All Around Pull View 介绍:实现视图四个方向(上下左右)都能够拖动更新(pull to r ...
这可能是东半球最保姆级的后台服务器开发学习路线
作者 | 编程指北来源 | 编程指北(id :cs_dev) 前言这一篇的主题是「Linux C/C++ 服务器/后台开发学习路线」. 这样的文章相信大家都见得不少了,写之前也非常忐忑,能不能和其 ...
AutoCAD.net/Map 3D/AIMS/MapGuide/Civil 3D二次开发学习指南
作者:杜长宇 Autodesk Infrastructure Map Server(AIMS)/MapGuide API二次开发学习指南 Autodesk Infrastructure Map Ser ...

ext.net 开发学习之FileUploadField与Image （四）

ext.net 开发学习之FileUploadField与Image （四）相关推荐

最新文章

热门文章