ASP.NET将图像上传到数据库并以图像滑块形式显示来自数据库的图像

时间:2016-04-06 11:17:54

标签: jquery asp.net database image slider

我现在正在使用visual studio制作网站。 我的目标是将图像上传到DB(不是ASP.net中的本地DB)并显示来自该DB的图像。 这里最重要的是图像应以图像滑块的形式显示。

现在我已经完成了将图像上传到数据库并使用dataTable显示图像。 另外,我单独找到了一个很好的图像滑块代码。 但是,使用该代码(图像滑块)我只能在本地文件夹中显示图像而不是数据库。

所以我想知道是否可以将它们连接到代码? 我附上了两个代码。

http://www.codeproject.com/Tips/1010313/Image-Slider-From-Folder-Without-Database-in-MVC - >这个是图像滑块

及以下是将图像上传到DB并在dataTable中显示的代码

(适用handler.ashx)

            public void ProcessRequest(HttpContext context)
            {
               string connectionString = "";
               MySqlConnection myConnection = new MySqlConnection    (connectionString); 
               myConnection.Open(); 
               string sql = "Select Content, ContentType from table where FileId=@FileId";
               MySqlCommand cmd = new MySqlCommand(sql, myConnection);
               cmd.Parameters.Add("@FileId", MySqlDbType.Int16).Value = context.Request.QueryString["id"]; 
               cmd.Prepare(); 
               MySqlDataReader dr = cmd.ExecuteReader(); 
               dr.Read(); 
               context.Response.ContentType = dr["ContentType"].ToString(); 
               context.Response.BinaryWrite((byte[])dr["Content"]); 
               dr.Close();
               myConnection.Close(); 
            }

            public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
        }

(适用webform.aspx)

<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="Upload" runat="server" Text="upload" OnClick="UploadFile"/>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField HeaderText="File Id" DataField="FileId" />
<asp:BoundField HeaderText="File Name" DataField="FileName" />
<asp:TemplateField HeaderText = "Image">
<ItemTemplate>
<asp:Image ID="Image1" runat="server" Height="100" Width="100" ImageUrl='<%#"Handler.ashx?id=" + Eval("FileId")%>'/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

(适用webform.aspx.cs)

    public partial class WebForm1 : System.Web.UI.Page
    {
        string connectionString = "";

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                GridView1.DataSource = FetchAllImagesInfo();
                GridView1.DataBind();
            }

        }
    protected void UploadFile(object sender, EventArgs e)
        {

            string filename = Path.GetFileName(FileUpload1.PostedFile.FileName);
            string contentType = FileUpload1.PostedFile.ContentType;
            using (Stream fs = FileUpload1.PostedFile.InputStream)
            {
                using (BinaryReader br = new BinaryReader(fs))
                {
                    byte[] bytes = br.ReadBytes((Int32)fs.Length);
                    using (MySqlConnection con = new MySqlConnection(connectionString))
                    {
                        string query = "INSERT INTO table(FileName, ContentType, Content) VALUES (@FileName, @ContentType, @Content)";
                        using (MySqlCommand cmd = new MySqlCommand(query))
                        {
                            cmd.Connection = con;
                            cmd.Parameters.AddWithValue("@FileName", filename);
                            cmd.Parameters.AddWithValue("@ContentType", contentType);
                            cmd.Parameters.AddWithValue("@Content", bytes);
                            con.Open();
                            cmd.ExecuteNonQuery();
                            con.Close();
                    }
                }
            }
        }
        Response.Redirect(Request.Url.AbsoluteUri);
    }

    public DataTable FetchAllImagesInfo() 
     { 
       MySqlDataAdapter da = new MySqlDataAdapter("Select * from table", "Data Source=;"); 
       DataTable dt = new DataTable(); 
       da.Fill(dt); 
       return dt; 
     }
}

如果很难将这两者结合起来, 让我知道方法

也很好 下面的

是滑块的代码 并且,它没有连接到数据库,它只是在不使用数据库的情况下上传图片,但我想要做的是将图像上传到数据库并以图像滑块格式显示来自数据库

   <html xmlns="http://www.w3.org/1999/xhtml">
   <head runat="server">
    <title></title>
    <link rel="stylesheet" href="bjqs.css"/>
    <link href='http://fonts.googleapis.com/css?     family=Source+Code+Pro|Open+Sans:300' rel='stylesheet' type='text/css'/>
    <link rel="stylesheet" href="demo.css"/>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/bjqs-1.3.min.js">
    </script>
    </head>
   <body>
    <form id="form1" runat="server">
    <div id="container">
     <h2>Image slider</h2>

     <div id="banner-fade">
      <!-- start Basic Jquery Slider -->
                <ul class="bjqs">
                    <asp:Repeater ID="Repeater1" runat="server">
                        <ItemTemplate>
                            <li>
                                <img src='<%# DataBinder.Eval Container.DataItem,"Value") %>' title='<%# (DataBinder.Eval (Container.DataItem,"Text").ToString()).Split('.')[0].ToString() %>' alt=""></li>
                        </ItemTemplate>
                    </asp:Repeater>
                </ul>
                <!-- end Basic jQuery Slider -->

            </div>
             <script class="secret-source" style="display:none;">
                 jQuery(document).ready(function ($) {

                     $('#banner-fade').bjqs({
                         height: 320,
                         width: 620,
                         responsive: true
                     });

                 });
      </script>
    </div>
     <script src="js/libs/jquery.secret-source.min.js"></script>
        <script>
            jQuery(function ($) {

                $('.secret-source').secretSource({
                    includeTag: false
                });

            });
    </script>
    </form>

   </body>

   </html>



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;

namespace _imageslider
{
public partial class WebForm1 : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e)
    {
        string[] filePaths = Directory.GetFiles(Server.MapPath("~/img/"));
        List<ListItem> files = new List<ListItem>();
        foreach (string filePath in filePaths)
        {
            string fileName = Path.GetFileName(filePath);
            files.Add(new ListItem(fileName, "img/" + fileName));
        }
        Repeater1.DataSource = files;
        Repeater1.DataBind();
    }
}
}

1 个答案:

答案 0 :(得分:0)

Page_Load中,您的(?)代码正在读取文件夹img中的所有图像,并将路径写入List。该列表绑定到Repeater,Repeater使用提供的路径创建<img>标记。

您必须更改HTML标记以指向handler.ashx而不是路径,并相应地更改Page_Load