遍历显示图片---点击图片下载

2020.11.9 学习记录

 

cshtml

   <div class="row">
        <div class="form-group col-md-12 col-sm-12 col-xs-12">
            <div class="row">
                <label class="control-label col-md-2 col-sm-2 col-xs-12">
                    請點擊圖片下載：
                </label>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="form-group col-md-12 col-sm-12 col-xs-12">
            <div class="row">
                <label class="control-label col-md-2 col-sm-2 col-xs-12"> 
                </label>
                <div class="col-md-10 col-sm-10 col-xs-12 ">     
                    <p> @Html.Raw(@ViewBag.Images)</p>
                </div>
            </div>
        </div>
    </div>

 

 

controller 調用接口

    ViewBag.Images = _issue.ImageList(Issueno); //调用实现类

 

接口

   string ImageList(string Issueno);

 

實現類

//顯示圖片
        public string ImageList(string Issueno)
        {
            var response = "";
            IQueryable<B2C_IMAGELIST> prod;
            response = response + "<div  class = 'img' id='div'>";
            int i = 0;

            prod = from im in _context.B2C_IMAGELIST.Where(a => a.ISSUENO == Issueno)
                   select new B2C_IMAGELIST { ISSUENO = im.ISSUENO, IMAGENAME = im.IMAGENAME, ID = im.ID, NEWNAME = im.ISSUENO };

            if (prod != null && prod.Any())
            {

                foreach (var p in prod)
                {
                 
/　　　　　　　　　　　　//给图片添加点击事件 并传送图片名称
                    response = response + "<img src='..\\upload\\" + p.IMAGENAME + "'  width='100px' height='100px' onclick=downLoad('" + p.IMAGENAME + "') />";
                    i++;
　　　　　　　　　　　　//换行显示
                    if (i % 4 == 0)
                    {
                        response = response + "<br/>";
                    }
                }
            }
            response = response + "</div>";
            return response;
        }

 

 

js 點擊圖片，傳入圖片名稱  獲取圖片相對路徑 

function downLoad(IMAGENAME) {

 

    var src = "..//upload//" + IMAGENAME;

    var at = $("<a></a>").attr("href", src).attr("download", IMAGENAME);

    at[0].click();

 

}