关于解决asp.net mvc网站页面Banner图片即时更换css里背景图片url相对路径问题的新方案

时间：2022-07-15 20:22:40

　　最近在网站首页上想将Banner壁纸给做到后台上传随时更改的效果。遇到问题便是：将上传的图片路径动态添加到首页css代码中，结果尝试了网上提供的思路，更改相对路径，换为url中“../../Content/”以及“./Content/”之类的，但实际操作并没能实现新上传的图片路径加载到css代码中。首页部分css代码贴出：

 /*--banner--*/
         .banner {
             background:url(../images/banner-1.jpg) no-repeat 0px 0px;
             background-size: cover;
             -webkit-background-size: cover;
             -o-background-size: cover;
             -ms-background-size: cover;
             -moz-background-size: cover;
             min-height: 600px;
         }

　　首页部分html贴出：

 <div class="banner">
     <div class="container">
         <h2>Humanity ,Love ,Devotion</h2>
         <h2></h2>
         <p></p>
         <a href="#service">快速获取我们提供的服务</a>
     </div>
 </div>

　　之前思路是，将上传的图片路径获取后，保存在mysql数据库中，然后写一个分页，在分页里将路径读出来，这时候将css里background:url(../images/banner-1.jpg) no-repeat 0px 0px;换成了一个字段赋值；

　　关于实现字段赋值实现是这样的：

 @using TheOne.Models
 @using TheOne.MySqlAccess
 @{
     SystemServiceAccess ssAccess = new SystemServiceAccess();
     String BannerPicUrl = ssAccess.GetBannerPic();
 }

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

折腾许久的相对路径，没能达到效果，于是我想出另一种实现思路，能不能将css保留原样，而只要将css引入的图片在文件系统里进行更换、重命名。庆幸的是，asp.net 拥有强大的文件操作功能！于是我开始重新开始写实现功能代码。

　　这是核心功能，里面有几点需要说明：

  [HttpPost]
         public ActionResult AddBannerPic(HttpPostedFileBase file)
         {
             //上传文章封面图片
             try
             {
                 )
                 {
                     //文件路径后要加后缀.jpg
                     string DeletePath =System.IO.Path.Combine(Server.MapPath( "~/Content/FrontEnd/images"),"Banner-1.jpg");
                     try
                     {
                         System.IO.File.Delete(DeletePath);//删除指定文件目录下的图片
                     }
                     catch (Exception f)
                     {

                         throw f;
                     }

                     //重命名上传的图片名称
                     string NewBannerPicName = "Banner-1.jpg";//指定新文件名
                     string Path = System.IO.Path.Combine(Server.MapPath("~/Content/FrontEnd/images"), NewBannerPicName);//更新前端Content文件夹下的目录Banner-1图片
                     file.SaveAs(Path);//存入新路径
                 }
             }
             catch (Exception e)
             {
                 throw e;

             return View("Index");
         }
  1. 写出上传页面，并在控制器中的action对文件进行操作，这里用到的上传方法比较老套，没有采用ajax,用的微软提供的方法——HttpPostedFileBase，这里需要说明的是，上传组件<input/>需要注意几点：<input name="file" id="file" type="file" class="file" />    name和id需要注明为file；
  2. string DeletePath =System.IO.Path.Combine(Server.MapPath( "~/Content/FrontEnd/images"),"Banner-1.jpg");//这里已经写死了，其中Server.MapPath（）这个非常实用，可以获取服务器目录的相对路径，保障了应用程序发布时的方便性。
  3. 这里要引入using System.IO;
  4. 当图片以二进制上传进入到action时，我们先将已存在的Banner-1.jpg删除，然后，重命名上传的文件名，并保存在旧目录中。

　　这样我刷新首页时，就能看到我刚上传的图片，这样的实现，没有使用数据库存储，也没有更改css相对路径，只需要使用到文件操作(System.IO)。

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

相关文章