[ASP.net WebForm] GridView實作上傳檔案佇列、預覽

[ASP.net WebForm] 實作上傳檔案佇列、預覽

問題來源:-想詢問一個有關檔案上傳的設計-

 

會有這樣的設計通常是使用者想要上傳檔案後

先暫時不儲存,想要預覽上傳的檔案,如果發現上傳錯誤還可以進行刪除

 

以下就寫個簡單的範例來實現(邏輯流程已在MSDN討論中說明了)

先建資料表

 

Create table tb_file
(
 [file_id] int identity primary key,
 [file_name] varchar(4000)

)
Go

Create table tb_tempFile
(
 temp_id int identity primary key,
 [file_name] varchar(4000),
 batch_id varchar(4000)
)
Go

  

.aspx

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>
</head>
<body>
    <form id="form1" runat="server">
     
    檔案上傳佇列:<br />
    <asp:GridView runat="server" ID="gv_showTempFile" AutoGenerateColumns="false" 
        onrowcommand="gv_showTempFile_RowCommand" >
    <Columns>
     <asp:TemplateField HeaderText="已上傳的檔案">
        <ItemTemplate>
        <a href="<%# "upload/" + Eval("file_name") %>" target="_blank">
            <%# Eval("file_name") %>
        </a>
        </ItemTemplate>
     </asp:TemplateField>
     <asp:TemplateField HeaderText="刪除">
      <ItemTemplate>
       <asp:Button runat="server" CommandName="myDelete" CommandArgument='<%# Eval("temp_id") %>' Text="刪除" ToolTip='<%# Eval("file_name") %>' />
      </ItemTemplate>
     </asp:TemplateField>
    </Columns>
    </asp:GridView>
    <br />
    <asp:FileUpload runat="server"  ID="fu_upload"/><asp:Button Text="上傳" 
        id="btn_upload" runat="server" onclick="btn_upload_Click" /><hr />
    <asp:LinkButton runat="server" ID="btn_confirm" Text="確認儲存" 
        onclick="btn_confirm_Click"/>


    </form>
</body>
</html>

.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Web.Configuration;
using System.IO;
using System.Data;

public partial class _Default : System.Web.UI.Page
{
    //資料庫連線字串
    protected string ConnString = WebConfigurationManager.ConnectionStrings["ConnString"].ConnectionString;

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)//Get Method進來
        {
            //產生一個batch_id
            ViewState["batch_id"] = Guid.NewGuid().ToString();
        }


    }

    //上傳檔案
    protected void btn_upload_Click(object sender, EventArgs e)
    {
        if (fu_upload.HasFile)//有選擇檔案
        {
            //要上傳到Server的檔名
            string new_filename = Guid.NewGuid().ToString() + Path.GetExtension(fu_upload.FileName);
            //上傳檔案
            fu_upload.SaveAs(Server.MapPath("~/upload/" + new_filename));
            //寫資料到tb_tempFile
            this.executeSql("Insert into tb_tempFile (file_name,batch_id) values ('" + new_filename.Replace("'", "''") + "','" + ViewState["batch_id"].ToString().Replace("'", "''") + "')");
            //GridView資料繫結tb_tempFile(只抓此次上傳的暫存檔)
            gridViewBind();
        }
       

    }

    //GridView資料繫結tb_tempFile(只抓此次上傳的暫存檔)
    private void gridViewBind()
    {
        gv_showTempFile.DataSource = this.query("Select temp_id,file_name from tb_tempFile Where batch_id = '" + ViewState["batch_id"].ToString().Replace("'", "''") + "'");
        gv_showTempFile.DataBind();

    }

    

    


    //確認儲存,將此次暫存資料從tb_tempFile移到tb_file
    protected void btn_confirm_Click(object sender, EventArgs e)
    {
      DataTable dt =this.query("Select file_name from tb_tempFile Where batch_id = '" + ViewState["batch_id"].ToString().Replace("'", "''") + "'");
      foreach (DataRow  dr in dt.Rows)//有資料才從tb_tempFile搬到tb_file
      {
          string file_name = dr["file_name"].ToString().Replace("'","''");
          //一筆一筆新增至tb_file表
          this.executeSql("Insert into tb_file (file_name) values ('"+file_name+"')");
      }

        //刪除此次暫存的資料
      this.executeSql("Delete from tb_tempFile Where batch_id = '" + ViewState["batch_id"].ToString().Replace("'","''") + "'");


      //GridView資料繫結tb_tempFile(只抓此次上傳的暫存檔)
      gridViewBind();
    }


    protected void gv_showTempFile_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        if (e.CommandName=="myDelete")//刪除暫存資料
        {
            string temp_id = e.CommandArgument.ToString().Replace("'","''");
            this.executeSql("Delete from tb_tempFile Where temp_id = '"+temp_id+"'");

            //刪除在Server上的檔案
            string file_name = ((Button)e.CommandSource).ToolTip;
            if (File.Exists(Server.MapPath("~/upload/" + file_name)))//Server上有上傳的檔案
            {
                File.Delete(Server.MapPath("~/upload/" + file_name));//刪除Server上的檔案
            }
            //GridView資料繫結tb_tempFile(只抓此次上傳的暫存檔)
            gridViewBind();
        }
    }


    //回傳query結果集
    private DataTable query(string sql)
    {
        using (SqlConnection conn = new SqlConnection(this.ConnString))
        {
            DataSet ds = new DataSet();
            SqlDataAdapter da = new SqlDataAdapter(sql, conn);
            da.Fill(ds);
            return ds.Tables.Count > 0 ? ds.Tables[0] : new DataTable();
        }
    }

    //執行SQL語句
    private void executeSql(string sql)
    {
        using (SqlConnection conn = new SqlConnection(this.ConnString))
        {
            SqlCommand cmd = new SqlCommand(sql, conn);
            conn.Open();
            cmd.ExecuteNonQuery();
            conn.Close();
        }

    }
}

 

 

執行結果:

image

上傳一張圖片試試

image  

image

還可以再上傳一張圖片

image

可以點選超連結預覽第一張圖

image

也可以把第一個檔案從Server上刪除

image

最後按下「確認儲存」將最終結果寫資料到另一個Table

image

查看DB資料

image

 

 

程式範例檔下載

 

其他類似文章:多图片上传+图片预览,兼容所有浏览器 IE5/IE6/IE7/IE8/IE9/Chrome/Safari/Firefox/Opera/ by 孟子e章