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

最新推荐文章于 2021-07-29 19:54:25 发布

weixin_30567471

最新推荐文章于 2021-07-29 19:54:25 发布

阅读量151

点赞数

文章标签：数据库 xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/tzy080112/archive/2011/03/11/1981629.html

版权

最近在一个项目中用到了图片预览并上传到功能，在本机用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: 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

转载于:https://www.cnblogs.com/tzy080112/archive/2011/03/11/1981629.html