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"); -}
- 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;
- 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.
- A using System.IO is introduced here;
- 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