最近在一个项目中用到了图片预览并上传到功能，在本机用vs2005调试运行一切尚好，但是到客户服务器上面发布之后，偶然发现，图片预览以及上传全部失效，预览失败，上传提示找不到文件等错误信息。
一下提供一些解决办法，仅供参考。
一下为常见的图片预览实现方式，但是当远程访问该页面 的时候仍然会出现无法预览的情况，但是很多人用，应该也会发现有问题。代码如下。
<% @ Page Language = " C# " AutoEventWireup = " true " CodeFile = " Photoupload.aspx.cs " Inherits = " Photoupload " %>
<! 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 >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > 本地图片预览代码（支持 IE6、IE7） </ title >
< style type ="text/css" >
#newPreview
{
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale) ;
}
</ style >
< script type ="text/javascript" language ="javascript" >
<!--
function PreviewImg(imgFile)
{
// 原来的预览代码，不支持 IE7。
var oldPreview = document.getElementById( " oldPreview " );
oldPreview.innerHTML = " <img src=\"file:\\\\ " + imgFile.value + " \" width=\"80\" height=\"60\" /> " ;
// 新的预览代码，支持 IE6、IE7。
var newPreview = document.getElementById( " newPreview " );
newPreview.filters.item( " DXImageTransform.Microsoft.AlphaImageLoader " ).src = imgFile.value;
newPreview.style.width = " 80px " ;
newPreview.style.height = " 60px " ;
}
-->
</ script >
</ head >
< body >
< p > 说明：以下针对的是互联网情况，如果您在本地作测试，比如输入的地址是：http://127.0.0.1/...，则可以看到全部预览。 </ p >
< hr />
< p > 如果您使用的是 IE6，则可以看到以下预览；如果您使用的是 IE7，则看不到以下预览。 </ p >
< div id ="oldPreview" ></ div >
< hr />
< p > 不论您使用的是 IE6 还是 IE7，均可以看到以下预览。 </ p >
< div id ="newPreview" ></ div >
< hr />
< p > 请选择一个图片进行预览： < input type ="file" size ="20" onchange ="javascript:PreviewImg(this);" /></ p >
</ body >
</ html >
<! 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 >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< title > 本地图片预览代码（支持 IE6、IE7） </ title >
< style type ="text/css" >
#newPreview
{
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale) ;
}
</ style >
< script type ="text/javascript" language ="javascript" >
<!--
function PreviewImg(imgFile)
{
// 原来的预览代码，不支持 IE7。
var oldPreview = document.getElementById( " oldPreview " );
oldPreview.innerHTML = " <img src=\"file:\\\\ " + imgFile.value + " \" width=\"80\" height=\"60\" /> " ;
// 新的预览代码，支持 IE6、IE7。
var newPreview = document.getElementById( " newPreview " );
newPreview.filters.item( " DXImageTransform.Microsoft.AlphaImageLoader " ).src = imgFile.value;
newPreview.style.width = " 80px " ;
newPreview.style.height = " 60px " ;
}
-->
</ script >
</ head >
< body >
< p > 说明：以下针对的是互联网情况，如果您在本地作测试，比如输入的地址是：http://127.0.0.1/...，则可以看到全部预览。 </ p >
< hr />
< p > 如果您使用的是 IE6，则可以看到以下预览；如果您使用的是 IE7，则看不到以下预览。 </ p >
< div id ="oldPreview" ></ div >
< hr />
< p > 不论您使用的是 IE6 还是 IE7，均可以看到以下预览。 </ p >
< div id ="newPreview" ></ div >
< hr />
< p > 请选择一个图片进行预览： < input type ="file" size ="20" onchange ="javascript:PreviewImg(this);" /></ p >
</ body >
</ html >
所以得探寻另一种方式，具体实现直接发送代码如下，
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Photo.aspx.cs" Inherits="Photo" %>
<!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>
<style type="text/css">
#preview_wrapper
{
display: inline-block;
width: 300px;
height: 300px;
background-color: #CCC;
}
#preview_fake
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
#preview_size_fake
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
visibility: hidden;
}
#preview
{
width: 300px;
height: 300px;
}
</style>
<script type="text/javascript">
function onUploadImgChange(sender)
{
if (!sender.value.match(/.jpg|.gif|.png|.bmp/i)) //忽略大小写
{
alert('图片格式无效！');
return false;
}
var objPreview = document.getElementById('preview');
var objPreviewFake = document.getElementById('preview_fake');
var objPreviewSizeFake = document.getElementById('preview_size_fake');
if (sender.files && sender.files[0])
{
objPreview.style.display = 'block';
objPreview.style.width = 'auto';
objPreview.style.height = 'auto';
// Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
objPreview.src = sender.files[0].getAsDataURL();
}
else if (objPreviewFake.filters)
{
// IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果
//（相同环境有时能显示，有时不显示），因此只能用滤镜来解决
// IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
sender.select();
var imgSrc = document.selection.createRange().text;
objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
autoSizePreview(objPreviewFake, objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight);
objPreview.style.display = 'none';
}
}
function onPreviewLoad(sender)
{
autoSizePreview(sender, sender.offsetWidth, sender.offsetHeight);
}
function autoSizePreview(objPre, originalWidth, originalHeight)
{
var zoomParam = clacImgZoomParam(300, 300, originalWidth, originalHeight);
objPre.style.width = zoomParam.width + 'px';
objPre.style.height = zoomParam.height + 'px';
objPre.style.marginTop = zoomParam.top + 'px';
objPre.style.marginLeft = zoomParam.left + 'px';
}
function clacImgZoomParam(maxWidth, maxHeight, width, height)
{
var param = { width: width, height: height, top: 0, left: 0 };
if (width > maxWidth || height > maxHeight)
{
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;
if (rateWidth > rateHeight)
{
param.width = maxWidth;
param.height = height / rateWidth;
}
else
{
param.width = width / rateHeight;
param.height = maxHeight;
}
}
param.left = (maxWidth - param.width) / 2;
param.top = (maxHeight - param.height) / 2;
return param;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>
<div id="preview_wrapper">
<div id="preview_fake">
<img id="preview" onload="onPreviewLoad(this)" />
</div>
</div>
<br />
<input id="upload_img" type="file" onchange="onUploadImgChange(this)" runat="server" />
<img id="preview_size_fake" /><span id="swh"></span>
</td>
</tr>
</table>
</form>
</body>
</html>
<!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>
<style type="text/css">
#preview_wrapper
{
display: inline-block;
width: 300px;
height: 300px;
background-color: #CCC;
}
#preview_fake
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
#preview_size_fake
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
visibility: hidden;
}
#preview
{
width: 300px;
height: 300px;
}
</style>
<script type="text/javascript">
function onUploadImgChange(sender)
{
if (!sender.value.match(/.jpg|.gif|.png|.bmp/i)) //忽略大小写
{
alert('图片格式无效！');
return false;
}
var objPreview = document.getElementById('preview');
var objPreviewFake = document.getElementById('preview_fake');
var objPreviewSizeFake = document.getElementById('preview_size_fake');
if (sender.files && sender.files[0])
{
objPreview.style.display = 'block';
objPreview.style.width = 'auto';
objPreview.style.height = 'auto';
// Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
objPreview.src = sender.files[0].getAsDataURL();
}
else if (objPreviewFake.filters)
{
// IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果
//（相同环境有时能显示，有时不显示），因此只能用滤镜来解决
// IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
sender.select();
var imgSrc = document.selection.createRange().text;
objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
autoSizePreview(objPreviewFake, objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight);
objPreview.style.display = 'none';
}
}
function onPreviewLoad(sender)
{
autoSizePreview(sender, sender.offsetWidth, sender.offsetHeight);
}
function autoSizePreview(objPre, originalWidth, originalHeight)
{
var zoomParam = clacImgZoomParam(300, 300, originalWidth, originalHeight);
objPre.style.width = zoomParam.width + 'px';
objPre.style.height = zoomParam.height + 'px';
objPre.style.marginTop = zoomParam.top + 'px';
objPre.style.marginLeft = zoomParam.left + 'px';
}
function clacImgZoomParam(maxWidth, maxHeight, width, height)
{
var param = { width: width, height: height, top: 0, left: 0 };
if (width > maxWidth || height > maxHeight)
{
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;
if (rateWidth > rateHeight)
{
param.width = maxWidth;
param.height = height / rateWidth;
}
else
{
param.width = width / rateHeight;
param.height = maxHeight;
}
}
param.left = (maxWidth - param.width) / 2;
param.top = (maxHeight - param.height) / 2;
return param;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>
<div id="preview_wrapper">
<div id="preview_fake">
<img id="preview" onload="onPreviewLoad(this)" />
</div>
</div>
<br />
<input id="upload_img" type="file" onchange="onUploadImgChange(this)" runat="server" />
<img id="preview_size_fake" /><span id="swh"></span>
</td>
</tr>
</table>
</form>
</body>
</html>
以上实现的是图片在线预览的功能，主要呢是通过js和css样式进行实现。
接下来 需要实现突破的上传，很显然图片上传需要先读取再上传，不论是保存到服务器文件夹，还是数据库，都需要根据图片地址将其处理上传，但是我在直接调用图片进行保存到数据库的操作过程中，提示找不到htmlimputfile中的文件，接下来就得解决这一的问题，让服务器能够找到我们要上传的图片。
主要实现方法：1、将本地图片上载到服务器文件夹，返回文件名或地址
2、读取文件地址，将地址存入数据库，或者读取地址对应的文件用二进制存入数据库
下面列出两个实现方法
1、图片上载到服务器文件夹：
#region 图片上传
public string UpFile(HtmlInputFile Fileup)
{
string Path = "uploadfile/";
string UpFile = Fileup.PostedFile.FileName;
int Size = Fileup.PostedFile.ContentLength;
string FileName = UpFile.Substring(UpFile.LastIndexOf("\\") + 1);
string FileType = FileName.Substring(FileName.LastIndexOf(".") + 1);
string SaveName = Guid.NewGuid().ToString() + "." + FileType;
string SavePic = Path + SaveName;
Path = "";
Fileup.PostedFile.SaveAs(Server.MapPath("~/" + SavePic));
Path = SavePic;
Fileup.Dispose();
return Path;
}
#endregion
public string UpFile(HtmlInputFile Fileup)
{
string Path = "uploadfile/";
string UpFile = Fileup.PostedFile.FileName;
int Size = Fileup.PostedFile.ContentLength;
string FileName = UpFile.Substring(UpFile.LastIndexOf("\\") + 1);
string FileType = FileName.Substring(FileName.LastIndexOf(".") + 1);
string SaveName = Guid.NewGuid().ToString() + "." + FileType;
string SavePic = Path + SaveName;
Path = "";
Fileup.PostedFile.SaveAs(Server.MapPath("~/" + SavePic));
Path = SavePic;
Fileup.Dispose();
return Path;
}
#endregion
此处浏览图片选择的是htmlimput,也可以选用服务器控件。图片更名部分最好选择GUID，用年月日时分秒毫秒重复的可能性极大不建议使用，或者认为添加一个区分。
2、完成图片上传之后，就需要读取服务器文件夹下的图片进行二进制转换存入数据库了。具体代码如下：
#region GetImageBuffer
public byte [] GetImageBuffer( string imgsrc)
{
// 保存logo到corp
MemoryStream ms = new MemoryStream();
int width = 0 ;
int height = 0 ;
// 从文件取得图片对象
System.Drawing.Image image = System.Drawing.Image.FromFile(imgsrc);
// 取得图片大小
width = image.Width;
height = image.Height;
if (width > 1280 || height > 1280 )
{
width = 1280 ;
height = ( int )(width * (( double )image.Height / ( double )image.Width));
}
System.Drawing.Size size = new Size(width, height);
// 新建一个bmp图片
System.Drawing.Image bitmap = new System.Drawing.Bitmap(size.Width, size.Height);
// 新建一个画板
System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap);
// 设置高质量插值法
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
// 设置高质量,低速度呈现平滑程度
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
// 清空一下画布
g.Clear(Color.Blue);
// 在指定位置画图
g.DrawImage(image, new System.Drawing.Rectangle( 0 , 0 , bitmap.Width, bitmap.Height),
new System.Drawing.Rectangle( 0 , 0 , image.Width, image.Height),
System.Drawing.GraphicsUnit.Pixel);
// 保存高清晰度的缩略图
bitmap.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
byte [] bytes = new byte [ms.Length];
ms.Write(bytes, 0 , ( int )ms.Length);
return ms.GetBuffer();
}
#endregion
public byte [] GetImageBuffer( string imgsrc)
{
// 保存logo到corp
MemoryStream ms = new MemoryStream();
int width = 0 ;
int height = 0 ;
// 从文件取得图片对象
System.Drawing.Image image = System.Drawing.Image.FromFile(imgsrc);
// 取得图片大小
width = image.Width;
height = image.Height;
if (width > 1280 || height > 1280 )
{
width = 1280 ;
height = ( int )(width * (( double )image.Height / ( double )image.Width));
}
System.Drawing.Size size = new Size(width, height);
// 新建一个bmp图片
System.Drawing.Image bitmap = new System.Drawing.Bitmap(size.Width, size.Height);
// 新建一个画板
System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap);
// 设置高质量插值法
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
// 设置高质量,低速度呈现平滑程度
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
// 清空一下画布
g.Clear(Color.Blue);
// 在指定位置画图
g.DrawImage(image, new System.Drawing.Rectangle( 0 , 0 , bitmap.Width, bitmap.Height),
new System.Drawing.Rectangle( 0 , 0 , image.Width, image.Height),
System.Drawing.GraphicsUnit.Pixel);
// 保存高清晰度的缩略图
bitmap.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
byte [] bytes = new byte [ms.Length];
ms.Write(bytes, 0 , ( int )ms.Length);
return ms.GetBuffer();
}
#endregion
以上imgsrc最好选择相对路径。
最后图片上传完毕，需要进入页面的时候加载图片，代码如下：
protected void Page_Load( object sender, System.EventArgs e)
{
if (Request.QueryString[ " ID " ] != null )
{
byte [] photo;
try
{
Corp.Load(Request.QueryString[ " ID " ]);
if (Request.QueryString[ " Type " ].ToString() == " Logo " )
photo = Corp.Logo;
else
photo = Corp.Organize;
if (photo != null && photo.Length > 0 )
{
MemoryStream ms = new MemoryStream(photo);
try
{
Image img = Image.FromStream(ms, true );
int width = img.Width;
int height = img.Height;
img = img.GetThumbnailImage(width, height, null , IntPtr.Zero);
Response.ContentType = " image/jpeg " ;
img.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
}
catch
{
NoPicture();
}
}
else
{
NoPicture();
}
}
catch
{
NoPicture();
}
Response.End();
}
}
#region 显示默认图片
/// <summary>
/// 如果图片获取异常，就显示默认图片。
/// </summary>
private void NoPicture()
{
Image defaultImg = Image.FromFile(Server.MapPath( @" ../images/nopicture.gif " ));
Response.ContentType = " image/gif " ;
defaultImg.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Gif);
}
#endregion
{
if (Request.QueryString[ " ID " ] != null )
{
byte [] photo;
try
{
Corp.Load(Request.QueryString[ " ID " ]);
if (Request.QueryString[ " Type " ].ToString() == " Logo " )
photo = Corp.Logo;
else
photo = Corp.Organize;
if (photo != null && photo.Length > 0 )
{
MemoryStream ms = new MemoryStream(photo);
try
{
Image img = Image.FromStream(ms, true );
int width = img.Width;
int height = img.Height;
img = img.GetThumbnailImage(width, height, null , IntPtr.Zero);
Response.ContentType = " image/jpeg " ;
img.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
}
catch
{
NoPicture();
}
}
else
{
NoPicture();
}
}
catch
{
NoPicture();
}
Response.End();
}
}
#region 显示默认图片
/// <summary>
/// 如果图片获取异常，就显示默认图片。
/// </summary>
private void NoPicture()
{
Image defaultImg = Image.FromFile(Server.MapPath( @" ../images/nopicture.gif " ));
Response.ContentType = " image/gif " ;
defaultImg.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Gif);
}
#endregion