About resolving the Site page banner picture Instant replacement CSS background image URL relative path problem new scheme

Recently on the homepage of the site want to banner wallpaper to do background upload at any time to change the effect. Encountered the problem is: the uploaded picture path is added dynamically to the home page CSS code, the results try to provide online ideas, change the relative path, in the URL ". /.. /content/"and"./content/", but the actual operation did not enable the newly uploaded image path to be loaded into the CSS code. Home section CSS code posted:

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;Ten}

Home section HTML Posted:

1 <Divclass= "banner">    2     <Divclass= "Container">3         <H2>Humanity, love, devotion</H2>4         <H2></H2>5         <P></P>6         <ahref= "#service">Get quick access to the services we offer</a>        7     </Div>8 </Div>

Before the idea is that the uploaded image path is saved in the MySQL database, and then write a paging, in the page to read the path, this time the CSS background: url (.. /images/banner-1.jpg) no-repeat 0px 0px; replaced by a field assignment;

About implementing a field assignment implementation is this:

1 @using theone.models 2 @using theone.mysqlaccess 3 @{4     New systemserviceaccess (); 5     String Bannerpicurl = ssaccess.getbannerpic ();      6 }

Bannerpicurl is added to the background: url (.. /@BannerPicUrl) no-repeat 0px 0px;

Tossing the relative path for a long time, did not achieve the effect, so I came up with another way to realize, can I keep the CSS as is, and just the CSS introduced in the file system to replace the image, rename. Fortunately, ASP. NET has powerful file operation function! So I started to start writing the implementation function code again.

This is the core function, there are a few things to explain:

1 [HttpPost]2          Publicactionresult addbannerpic (httppostedfilebase file)3         {            4             //upload an article cover picture5             Try6             {7                 if(File! =NULL&& file. ContentLength >0)8                 {9                     //after file path, add suffix. jpgTen                     stringDeletepath =system.io.path.combine (Server.MapPath ("~/content/frontend/images"),"banner-1.jpg"); One                     Try A                     { -System.IO.File.Delete (Deletepath);//Delete the picture under the specified file directory -                     } the                     Catch(Exception f) -                     { -                          -                         ThrowF; +                     } -                     +                     //Rename an uploaded picture name A                     stringNewbannerpicname ="banner-1.jpg";//Specify a new file name at                     stringPath = System.IO.Path.Combine (Server.MapPath ("~/content/frontend/images"), newbannerpicname);//Update the directory under the front-end content folder Banner-1 Pictures -File. SaveAs (Path);//Deposit New Path -                 } -             } -             Catch(Exception e) -             { in                 Throwe; -             }
 to              +             returnView ("Index"); -}

1. Write the upload page, and in the controller action on the file, the use of the upload method is more old-fashioned, not using Ajax, using the method of Microsoft--httppostedfilebase, it should be noted, upload components <input/> Some points to note : <input name= "file" id= "file" type= "file" class= "file"/> name and ID need to be noted as file;
2. String Deletepath =system.io.path.combine (Server.MapPath ("~/content/frontend/images"), "banner-1.jpg");//This is already written dead, where Server.MapPath () this is very useful, you can get the relative path of the server directory, to ensure the ease of application publishing.
3. A using System.IO is introduced here;
4. when the image is uploaded to the action in binary, we first delete the existing banner-1.jpg, then rename the uploaded file name and save it in the old directory .

So I refresh the homepage, I can see the image I just uploaded, so that the implementation, not using the database storage, nor change the CSS relative path, only need to use the file operation (System.IO).

Project Demo Address: http://www.libertas.ren/

About resolving the Site page banner picture Instant replacement CSS background image URL relative path problem new scheme