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

时间：2022-02-25 21:35:10

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>

　　

标签：

相关文章