图片预览加上传遇到的一系列问题

图片预览加上传遇到的一系列问题

最近在一个项目中用到了图片预览并上传到功能，在本机用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">
    
    </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, 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
此处浏览图片选择的是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
以上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
相关阅读:
基于Html5的爱情主题网站–表白神器
 一个基于WebGL的仿真3D水池有逼真的水波纹效果
 一些纯css3写的公司logo
IIS、SQL SERVER和VS的安装顺序
 SQL Server 2008 收缩日志清空删除大日志文件
 判断SqlConnection连接是否关闭
 正则
 C# MD5加密字符串
 sqlServer MD5
sqlserver 连接数
原文地址：https://www.cnblogs.com/tzy080112/p/1981629.html