關于解決asp.net mvc網站頁面Banner圖片即時更換css里背景圖片url相對路徑問題的新方案

文章出處

　　最近在網站首頁上想將Banner壁紙給做到后臺上傳隨時更改的效果。遇到問題便是：將上傳的圖片路徑動態添加到首頁css代碼中，結果嘗試了網上提供的思路，更改相對路徑，換為url中“../../Content/”以及“./Content/”之類的，但實際操作并沒能實現新上傳的圖片路徑加載到css代碼中。首頁部分css代碼貼出：

 1 /*--banner--*/
 2         .banner {
 3             background:url(../images/banner-1.jpg) no-repeat 0px 0px;            
 4             background-size: cover;
 5             -webkit-background-size: cover;
 6             -o-background-size: cover;
 7             -ms-background-size: cover;
 8             -moz-background-size: cover;
 9             min-height: 600px;
10         }

　　首頁部分html貼出：

1 <div class="banner">    
2     <div class="container">
3         <h2>Humanity ,Love ,Devotion</h2>
4         <h2></h2>
5         <p></p>
6         <a href="#service">快速獲取我們提供的服務</a>        
7     </div>
8 </div>

　　之前思路是，將上傳的圖片路徑獲取后，保存在mysql數據庫中，然后寫一個分頁，在分頁里將路徑讀出來，這時候將css里background:url(../images/banner-1.jpg) no-repeat 0px 0px;換成了一個字段賦值；

　　關于實現字段賦值實現是這樣的：

1 @using TheOne.Models
2 @using TheOne.MySqlAccess
3 @{
4     SystemServiceAccess ssAccess = new SystemServiceAccess();
5     String BannerPicUrl = ssAccess.GetBannerPic();     
6 }

　　BannerPicUrl被加在 background:url(../@BannerPicUrl) no-repeat 0px 0px;

折騰許久的相對路徑，沒能達到效果，于是我想出另一種實現思路，能不能將css保留原樣，而只要將css引入的圖片在文件系統里進行更換、重命名。慶幸的是，asp.net 擁有強大的文件操作功能！于是我開始重新開始寫實現功能代碼。

　　這是核心功能，里面有幾點需要說明：

 1  [HttpPost]
 2         public ActionResult AddBannerPic(HttpPostedFileBase file)
 3         {            
 4             //上傳文章封面圖片
 5             try
 6             {
 7                 if (file != null && file.ContentLength > 0)
 8                 {
 9                     //文件路徑后要加后綴.jpg
10                     string DeletePath =System.IO.Path.Combine(Server.MapPath( "~/Content/FrontEnd/images"),"Banner-1.jpg");
11                     try
12                     {
13                         System.IO.File.Delete(DeletePath);//刪除指定文件目錄下的圖片
14                     }
15                     catch (Exception f)
16                     {
17                         
18                         throw f;
19                     }
20                    
21                     //重命名上傳的圖片名稱                    
22                     string NewBannerPicName = "Banner-1.jpg";//指定新文件名                                        
23                     string Path = System.IO.Path.Combine(Server.MapPath("~/Content/FrontEnd/images"), NewBannerPicName);//更新前端Content文件夾下的目錄Banner-1圖片
24                     file.SaveAs(Path);//存入新路徑
25                 }
26             }
27             catch (Exception e)
28             {
29                 throw e;
30             }
31             
32             return View("Index");
33         }

寫出上傳頁面，并在控制器中的action對文件進行操作，這里用到的上傳方法比較老套，沒有采用ajax,用的微軟提供的方法——HttpPostedFileBase，這里需要說明的是，上傳組件<input/>需要注意幾點：<input name="file" id="file" type="file" class="file" /> name和id需要注明為file；
string DeletePath =System.IO.Path.Combine(Server.MapPath( "~/Content/FrontEnd/images"),"Banner-1.jpg");//這里已經寫死了，其中Server.MapPath（）這個非常實用，可以獲取服務器目錄的相對路徑，保障了應用程序發布時的方便性。
這里要引入using System.IO;
當圖片以二進制上傳進入到action時，我們先將已存在的Banner-1.jpg刪除，然后，重命名上傳的文件名，并保存在舊目錄中。

　　這樣我刷新首頁時，就能看到我剛上傳的圖片，這樣的實現，沒有使用數據庫存儲，也沒有更改css相對路徑，只需要使用到文件操作(System.IO)。

項目演示地址：http://www.libertas.ren/

文章列表