FileUplad上传图片绑定Image控件

asp.net怎么让Image控件的图片随着FileUpload控件的值改变

(当点击浏览按钮时,选择一个图片的路径,然后根据这个路径改变Image的图片,用C#做)

方法一:
<asp:FileUpload ID="FileUpload1" runat="server" Width="208px" onchange="if( pic_show.style.display == 'none')pic_show.style.display='';pic_show.src = this.value;"/>
<img id="pic_show" style="display:none;width:150px;" alt="" />

<script language="javascript" type="text/javascript">

function $(o){return document.getElementById(o);}

function CheckImgCss(o)
{

if (!/\.((jpg)|(bmp)|(gif)|(png))$/ig.test(o.value))
{
alert('只能上传jpg,bmp,gif,png格式图片!');
o.outerHTML = o.outerHTML;
}
else {
var newPreview = document.getElementById("Image1");

newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = o.value;
//$(img).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=o.value;
//$('Image1').src = o.value;//这里IE7已经不支持了。所以才有上面的方法。
}
}

</script>

<asp:Image ID="Image1" runat="server" width="102px" height="100px" />

<asp:TextBox ID="txtphoto" runat="server"  Width="0px" Height="0px"></asp:TextBox>//记录图片名称,在后台中会用到

<asp:FileUpload ID="FileUpload" Width="300px" onchange="CheckImgCss(this);" runat="server" />

 

方法二:(这种方法我没有试,但方法一是肯定行的)
在fileupload加 onchange="checkfile()" 加上<img id="myimg" alt=""/>

function checkfile()
{
var fileName=$("FileUp").value;
if(fileName=="")
return;
//检查文件类型
var exName=fileName.substr(fileName.lastIndexOf(".")+1).toUpperCase();
if(exName=="JPG"||exName=="BMP"||exName=="GIF")
{
document.getElementById("myimg").src=fileName;//这里给图片值就可以了
}
else
{
alert("请选择正确的图片文件");
document.getElementById("FileUp").value="";
}
}

 

后台上传图片代码:

fileName = FileUpload.PostedFile.FileName;
strDoctorPhoto = fileName.Substring(fileName.LastIndexOf("\\") + 1);

//将上传至服务器上的图片转换成二进制流,将返回值保存到数据库中(对应字段数据类型是varbinary(max))
public byte[] SaveFileToDB(string photoName)
{
FileStream fs = new FileStream(Server.MapPath("~/DoctorPhote/" + photoName), FileMode.Open, FileAccess.Read);
byte[] mybyte = new byte[(int)fs.Length];
fs.Read(mybyte, 0, (int)fs.Length);
fs.Close();

return mybyte;
}

//将图片上传至文件夹
public void UploadFileIntoDir(FileUpload MyFile, string DirName)
{
string ex = System.IO.Path.GetExtension(DirName).ToLower();
string path = System.Web.HttpContext.Current.Request.MapPath("../DoctorPhote/");

if (!System.IO.Directory.Exists(path))
{
System.IO.Directory.CreateDirectory(path);

if (MyFile.FileContent.Length > 0)
{
if (".jpg.gif.png.bmp".Contains(ex))
{
MyFile.SaveAs(path + DirName);
}
else
{
System.Web.HttpContext.Current.Response.Write("<script>alert('不允许上传此类型文件!');</script>");

}
}
}
else
{
if (MyFile.FileContent.Length > 0)
{
if (".jpg.gif.png.bmp".Contains(ex))
{
MyFile.SaveAs(path + DirName);
}
else
{
System.Web.HttpContext.Current.Response.Write("<script>alert('不允许上传此类型文件!');</script>");

}
}
}
}

//删除图片文件方法
public static void DeleteFile(string FileName)
{
string filePath = System.Web.HttpContext.Current.Request.MapPath("/ " + FileName);
try
{
if (File.Exists(filePath))
{
File.Delete(filePath);

}
}
catch { }
finally { }
}

 

//判断上传图片大小不能超过20k
if (FileUpload.PostedFile.ContentLength > 20 * 1024)

//config中设置上传文件大小

<httpRuntime
executionTimeout="300"
maxRequestLength="40960"
useFullyQualifiedRedirectUrl="false"/>

=================================================
C# 将图片通过FileUpload控件上传,用实现Image预览

<style type="text/css" >
#newPreview {
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}</style>

写一个JS方法

<script type="text/javascript" language="javascript">
function PreviewImg(imgFile) {

var newPreview=document.getElementById("newPreview");
newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
}
</script>

=================================================

用Web或WINFROM把数据库中的图片读出来(图片类型是Image)

前台的控件

<asp:Image ID="Image1" runat="server" width="102px" height="100px" />

后台代码

//ID是当前图片所属数据的ID,新建一个picture.aspx页面,专门用于存放读取图片

this.Image1.ImageUrl = string.Format("picture.aspx?ImgID={0}", Request.QueryString["ID"]);

picture.aspx后台代码如下:

int ImgID = Convert.ToInt32(Request.QueryString["ImgID"]); //ImgID为图片ID
DataSet ds = BLL.GuaHaoData.Doctor.GetDoctor(string.Format("ID={0}", ImgID));

Byte[] PictureData = null;
PictureData = (Byte[])ds.Tables[0].Rows[0]["PhotoPath"];

Response.AppendHeader("contect-length", PictureData.Length.ToString());
Response.BinaryWrite(PictureData);
Response.End();

 

这样,按照上面的操作步骤,就可以实现浏览图片的功能。

posted @ 2013-01-10 11:38  solo~  阅读(531)  评论(0编辑  收藏  举报