摘要:本篇教程介绍了HTML+CSS入门 解决网站页面Banner图片即时更换css里背景图片url相对路径问题的新方案,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
本篇教程介绍了HTML+CSS入门 解决网站页面Banner图片即时更换css里背景图片url相对路径问题的新方案,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
<
最近在网站首页上想将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)。
本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号