melo 唐

此程式細分兩支,第一支完上傳圖片跟保存圖片,第二支為去資料庫撈出資料顯示圖片。

第一支是可以一次上傳3張圖片,並且檔名重複時會幫你自動更改,還有檢查上傳檔案是否為圖片檔功能。

第二支是顯示User上傳圖片後顯示結果。

第一支:

前端畫面:

後置程式碼:

protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{
//表示第一次執行
if (IsPostBack)
{
//建立在Visual Studio上的專案資料夾路徑
string saveDir = "\\Ch18_FileUpload\\Uploads\\";

//取得Server端的Visual Studio根目錄路徑
string appPath = Request.PhysicalApplicationPath;

//根目錄+專案資料夾路徑
string savePath = appPath + saveDir;

//檔案檔名check
string pathToCheck = null;

//確認副檔名是否為圖片檔
Boolean fileOK = false;

//合法圖片副檔名
string[] allowedExtensions = { ".jpg", ".jpeg", ".png", ".gif" };

//Request.Files是指所有頁面上user要上傳的檔案之集合
for (int i = 1; i < Request.Files.Count; i++)
{
//用for加上FindControl抓取頁面上每一個fileUpload控制項
FileUpload myFL = (FileUpload)Page.Form.FindControl("FileUpload" + i);

//取得上傳圖檔檔名
string fileName = myFL.FileName;

//如果有檔案要上傳
if (myFL.HasFile)
{
string fileExtensionsValidation = System.IO.Path.GetExtension(fileName).ToLower();
//判斷副檔名
for (int j = 0; j <allowedExtensions.Length; j++)
{
if (fileExtensionsValidation == allowedExtensions[j])
{
fileOK = true;
}
}//end of for

//pathToCheck = 根目錄+專案資料夾路徑+上傳圖片檔名
pathToCheck = savePath + fileName;

//這部分是檔案名稱衝突修改的部分
if (System.IO.File.Exists(pathToCheck))
{
int my_counter = 2;
string tempfileName = null;
while (System.IO.File.Exists(pathToCheck))
{
tempfileName = my_counter.ToString() + "_" + fileName;
pathToCheck = savePath + tempfileName;
my_counter += 1;
}
Response.Write("檔案發生檔名重複修改如下:" + tempfileName.ToString());

//修改後檔名重新設定給fileName(上傳圖片檔名)
fileName = tempfileName;
}
//如果檔案副檔名跟衝突檔名都修改好了就儲存圖片到指定路徑中
//並且將檔名存到資料表中
if (fileOK)
{
//儲存圖片到指定路徑中,pathToCheck = 根目錄+專案資料夾路徑+上傳圖片檔名
myFL.SaveAs(pathToCheck);
//存圖片到資料表中,call function
int OK = FileUpload_DB(fileName);
if (OK > 0)
{
Response.Write("上傳成功");
}
}//end of if (fileOK)
}//end of if (myFL.HasFile)
}
}
}// end of Button1_Click

//儲存到資料表中的function
protected int FileUpload_DB(string InputFileName)
{
SqlConnection Conn = new SqlConnection(WebConfigurationManager.ConnectionStrings["testConnectionString"].ConnectionString);
SqlCommand cmd = new SqlCommand("Insert Into FileUpload_DB(FileUpload_time,FileUpload_FileName,FileUpload_Memo) Values(getdate(),'" + InputFileName + "','上傳圖檔的註解與說明文字')", Conn);
int OK = 0;
try
{
Conn.Open();
OK = cmd.ExecuteNonQuery();
}
catch (Exception ex)
{
Response.Write(ex.ToString());
}
finally
{
if (Conn.State == ConnectionState.Open)
{
Conn.Close();
Conn.Dispose();
}
}
return OK;
}

第二支程式執行結果:

重點:(搭配ListView無後置程式碼,改前端程式即可)

1.AlerterNatingItem 跟 ItemTemplete 都要資料綁訂。

2.上面這兩個樣板都要自己加入Image控制項,用來顯示上傳圖片。

3.資料綁訂: 

 <ItemTemplate>

  要顯示的圖片:<asp:Image ID="Image1" runat="server" ImageUrl='<%# "~/FileUpload/Uploads/" + Eval("FileUpload_FileName") %>' />

 </ItemTemplate>

~/FileUpload/Uploads/ : 到Visual Studio從跟目錄開始找到這個資料夾(放上傳圖片的)。

Eval("FileUpload_FileName") : 到資料庫中找上傳圖片的檔名。