当前位置: 开发笔记 > 前端 > 正文

介绍一款网站前台图片滚动插件之"switchable"

作者：Cy章健Mr_189 | 来源：互联网 | 2023-05-17 18:07

一、简单介绍：jQuery.Switchable是一款整合了Tabs、Slide、Scrollable等常见UI组件的jQuery插件，在这里，简答说说他的Slide。像Tabs，在Jquery-UI

一、简单介绍：jQuery.Switchable是一款整合了Tabs、Slide、Scrollable等常见UI组件的jQuery插件，在这里，简答说说他的Slide。像Tabs，在Jquery-UI和Jquery-EasyUI中也有Tabs。在我的博客中也使用到了，请看完整“信息发布系统”系列,下面就是Jquery-EasyUI的Tabs。

SwichTab Css

5、现在运行代码：出现之前介绍的效果了吧。

（4）添加：上传图片的功能。

1、遍历上传上来的文件，使用HttpPostedFileBase进行接收。注意：参数 photo得和前台的name得一致。

2、判断上传文件的类型，防止一些恶意用户，上传木马。

3、item.SaveAs(Server.MapPath("~/images/" + Path.GetFileName(item.FileName)));进行保存文件。

4、接下来又是XElement的使用，SetElementValue，为节点进行赋值。最后也得保存!Save();

5、出现上图效果！

 private const string picturePath = "~/XML/Pic.xml";
        [HttpPost]
        public ActionResult AddImage(HttpPostedFileBase[] photo)
        {
            foreach (var item in photo)
            {
                if (item!=null)
                {
                    var extention = Path.GetExtension(item.FileName);
                    if (extention == ".aspx" || extention == ".html" || extention == ".exe" || extention == ".asp" || extention == ".jsp" || extention == ".js" || extention == ".htm" || extention == ".php")
                    {
                        return Content("");
                    }                 
   
                    item.SaveAs(Server.MapPath("~/images/" + Path.GetFileName(item.FileName)));
                    XElement xe = XElement.Load(Server.MapPath(picturePath));
                    XElement element = new XElement(XName.Get("img"));
                    element.SetElementValue("id", DateTime.Now.ToString("yyyyMMddhhmmssfff"));
                    element.SetElementValue("title", Path.GetFileName(item.FileName));
                    element.SetElementValue("path", "/images/" + Path.GetFileName(item.FileName));
                    xe.Add(element);
                    xe.Save(Server.MapPath(picturePath));                       
                }
            }
            return RedirectToAction("Index","Home");
        }