图片预览加上传遇到的一系列问题
最近在一个项目中用到了图片预览并上传到功能，在本机用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
{
/* 该对象用户在IE下显示预览图片 */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
#preview_size_fake
{
/* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
visibility: hidden;
}
#preview
{
/* 该对象用户在FF下显示预览图片 */
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
{
/* 该对象用户在IE下显示预览图片 */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
#preview_size_fake
{
/* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
visibility: hidden;
}
#preview
{
/* 该对象用户在FF下显示预览图片 */
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
