ASP.NET或者 js方式实现文件夹多图片浏览的方式

时间：2023-11-10 12:34:32

1.JS方式，限制大，而且图片名称如果不规则的话会获取不全。

<html>

<head>

<style>

img

{

max-width:1300px;

}

</style>

</head>

<body>

<div id='temp'>

<ul id="temp2">

<ul>

</div>

<script>

	for(i=0;i<549;i++)

{

	var newElement = document.createElement('li');

	var imgElement=document.createElement('img');

	imgElement.setAttribute("id","id"+i);

	var v1=document.getElementById("temp2").appendChild(newElement).appendChild(imgElement);

	//v1.setAttribute("id","id"+i);

	var a=8718+i;

	document.getElementById("id"+i).setAttribute("src","1/_MG_"+a+".jpg");

}

</script>

</body>

</html>

　　2.ASP.NET方式：可以轻松获取所有不规则文件名，更好。

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.IO;

namespace K_PicLoader.Controllers

{

    public class PicLoaderController : Controller

    {

        //

        // GET: /PicLoader/

        [HttpGet()]

        public virtual ActionResult Index()

        {

            DirectoryInfo di = new DirectoryInfo(Server.MapPath("~/Content/1"));

            var folder = di.GetFiles().ToList().Select(d=>d.Name);

            return View(folder);

        }

    }

}

　　

@{

    ViewBag.Title = "Index";

}

<h2>Index</h2>

<style>

    img {

        max-width:1300px;

    }

    li

    {

       list-style:none;

    }

    body {

        margin:0 auto;

    }

    ul {

        margin-left:-4.5cm;

    }

</style>

<ul>

    @foreach (var t in Model)

    {

    <li><img src='~/Content/1/@t' /></li>

    }

</ul>

　　

相关文章