标签:
最近在网站首页上想将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 }
这样我刷新首页时,就能看到我刚上传的图片,这样的实现,没有使用数据库存储,也没有更改css相对路径,只需要使用到文件操作(System.IO)。
项目演示地址:http://www.libertas.ren/
关于解决网站页面Banner图片即时更换css里背景图片url相对路径问题的新方案
标签:
原文地址:http://www.cnblogs.com/zhouyuangan/p/aspnet_1.html