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