zoukankan      html  css  js  c++  java
  • 二进制流上传图片,预览,读取显示

    上传图片并生成缩略图预览效果

    <div>
      <asp:FileUpload ID="FileUpload1" runat="server" CssClass="btn" Width="320px" onchange="getValue()" />&nbsp;<asp:Button ID="btnAdd" runat="server" Text="Submit" ValidationGroup="AddPlat" CssClass="btn" Width="80px" OnClick="btnAdd_Click" />
      <div id="t2" runat="server" style=" 150px; height: 120px; visibility: hidden; display: none; border: solid 1px #CCC;">
          <img alt="" id="t1" runat="server" src="" style=" 150px; height: 120px; border: solid 1px #CCC; display: none;" />
      </div>
      <asp:Image ID="imageSony" runat="server" BorderStyle="Solid" Width="150px" Height="120px" ImageUrl="" />
    </
    div>

    getvalue() Function的定义在一下Javascript中:

    Javascript
        <script type="text/javascript">
    function getValue(){ 
    
        var isIE = (document.all) ? true : false;
        var isIE7 = isIE && (navigator.userAgent.indexOf('MSIE 7.0') != -1);
        var isIE8 = isIE && (navigator.userAgent.indexOf('MSIE 8.0') != -1);
        var isMozilla = /mozilla/.test( navigator.userAgent ) && !/(compatible|webkit)/.test( navigator.userAgent )
        var isOpera = /Opera/.test( navigator.userAgent )
    
        var t1=document.getElementById("t1")
        var t2=document.getElementById("t2")
        var imgsony=document.getElementById("imageSony")
        var t=document.getElementById("FileUpload1");
        var value=t.value
        
        t1.style.display="block";
        t2.style.display="block";
        imgsony.style.display="none";
        
        if(isIE7 || isIE8){
            t.select();
            var value=document.selection.createRange().text;
            document.selection.empty();
        }else if(isMozilla){
            value = t.files[0].getAsDataURL();
        }
        
        //alert(value)
        
        
        if(isIE7 || isIE8){
            t1.style.visibility="hidden"
            //t1.style.display="none";
            t2.style.visibility=""
            
            t1.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image')"
            t1.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')"
        
            t2.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image')"
            t2.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')"
        
            t1.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=value;
            
            t2.style.width=t1.offsetWidth
            t2.style.height=t1.offsetHeight
        
            t2.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=value;
        }else{
            t1.src=value
        }
    }
    
        </script>


    二进制流方式存入数据库

    string fullFileName = FileUpload1.PostedFile.FileName;
    //string fileName = fullFileName.Substring(fullFileName.LastIndexOf("\\") + 1);//图片名称
    string type = fullFileName.Substring(fullFileName.LastIndexOf(".") + 1).ToLower();
    if (type == "jpg" || type == "gif" || type == "bmp" || type == "png" || type == "jpeg")
    {
          HttpPostedFile upFile = FileUpload1.PostedFile;//HttpPostedFile对象,用来读取上传图片的属性
         int fileLength = upFile.ContentLength;//记录文件的长度
         byte[] fileBytePicture = new byte[fileLength];//用图片的长度来初始化一个字节数组存储临时的图片文件
         Stream fileStream = upFile.InputStream;//建立文件流对象
         fileStream.Read(fileBytePicture, 0, fileLength);
          //Insert into db, picture字段,image类型
          //在此要注意,SQL语句中插入DB不能像varchar()类型,用单引号引起来,这样的话会报错,要使用参数自行插入,eg:
          //cmd.CommandText = @"INSERT INTO Category(Category,Picture)VALUES(@Category,@Picture)";
         //cmd.Parameters.AddWithValue("@Category", category);//string category
    //cmd.Parameters.AddWithValue("@Picture", picture);
    // byte[] picture }

    其中,Stream fileStream = upFile.InputStream;//建立文件流对象
            fileStream.Read(fileBytePicture, 0, fileLength);
    建立文件流对象,生成二进制流必须存在,不能去掉,否则能够生成二进制流保存到数据库中。 

    从数据库读取图片

    BindItem();

     imageSony.ImageUrl = "ReadImage.aspx?itemid=" + itemID;

    ReadImage.aspx.cs

    ReadImage。aspx.cs
    protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    string imageid = "1";
                    if (Request.QueryString["itemid"] != null)
                    {
                        imageid = Request.QueryString["itemid"].ToString();
                    }
                    int imgID = Int32.Parse(imageid);
                    ShowImage(imgID);
                }
            }
    
            private void ShowImage(int itemID)
            {
                DataTable dt = new DataTable();
                dt = srb.GetSonyItem(itemID);//获得数据源
                byte[] b_image = (byte[])dt.Rows[0]["Picture"];//得到数据库二进制字段内容
                if (b_image.Length > 0)
                {
                    Byte[] byteImg = (byte[])dt.Rows[0]["Picture"];
                    Response.BinaryWrite(byteImg);//写入二进制流
                    Response.End();
                }
            }
    Be the change you want to see in the world.
  • 相关阅读:
    【个人】排序练习
    lintcode:二叉树的层次遍历
    lintcode:子集 & 带重复元素的子集
    lintcode:全排列&带重复元素的排列
    5.2哈夫曼树——哈夫曼树与哈夫曼编码
    5.1 堆 —— 堆的定义与操作
    04-树7 二叉搜索树的操作集
    04-树6 Complete Binary Search Tree
    04-树5 Root of AVL Tree
    04-树4 是否同一棵二叉搜索树
  • 原文地址:https://www.cnblogs.com/eva_2010/p/2438561.html
Copyright © 2011-2022 走看看