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

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();

 

}
原文地址:https://www.cnblogs.com/lixia0604/p/13948104.html