Блог

Главная - Вопросы по программированию - Передача изображения из модального в контроллер

Передача изображения из модального в контроллер

#c# #asp.net #asp.net-mvc #asp.net-core #bootstrap-modal

Вопрос:

У меня есть следующее приложение, в котором я должен загрузить изображение непосредственно из modal на страницу.

Обратите внимание, что:

  1. Изображение уже загружено администратором в этот режим.
  2. Изображения сохраняются в «статическом» файле в папке «wwwroot». Таким образом, для этого шага не требуется база данных.

Все, что мне нужно, — это когда я нажимаю на изображение в модальном режиме, оно должно быть загружено в представление. Так что я могу сохранить его позже в базе данных.

Вот контроллер банка изображений

     public IActionResult Index()
    {
        var webRoot = _hostingEnvironment.WebRootPath;
        var appData = System.IO.Path.Combine(webRoot, "static");
        var files = Directory.GetFiles(appData, "*.*", SearchOption.AllDirectories);
        var model = new ImageBankViewModel()
        {
            ImagesListUrls = files.Select(i=>Path.GetFileName(i))
        };

        return View(model);
    }

    [HttpPost]
    public IActionResult Upload(ImageBankViewModel model)
    {
        if (ModelState.IsValid)
        {
            if (model.Image != null)
            {
                
                string webRootPath = _hostingEnvironment.WebRootPath;
                var path = Path.Combine(webRootPath, "static");
                if (!Directory.Exists(path))
                    Directory.CreateDirectory(path);

                var extension = Path.GetExtension(model.Image.FileName);
                var newFileName = model.Type   "-"   DateTime.Now.Ticks;
                using (var filesStream = new FileStream(Path.Combine(path, newFileName   extension), FileMode.Create))
                {
                    model.Image.CopyTo(filesStream);
                }
                return RedirectToAction("Index");
            }
        }
        ImageBankViewModel modelVM = new ImageBankViewModel()
        {
            Image = model.Image,
            ImagesListUrls = model.ImagesListUrls,
            Type = model.Type
        };

        return RedirectToAction("Index",modelVM);//Unsuccessful Upload , fix invalid model
    }

    public IActionResult CreateStory()
    {
        return View();
    }

    public ActionResult GetImagesPartial()
    {
        var webRoot = _hostingEnvironment.WebRootPath;
        var appData = System.IO.Path.Combine(webRoot, "static");
        var files = Directory.GetFiles(appData, "*.*", SearchOption.AllDirectories);
        var model = new ImageBankViewModel()
        {
            ImagesListUrls = files.Select(i => Path.GetFileName(i))
        };
        return PartialView("_ImagesBankModal",model);
    }

    public void ImageDelete(string image)
    {

    }
    
      public void SelectImage(string image)
        {
           // Here I want to get the selected image from the modal
        }
    }
}

Создать представление истории

 @{
    ViewData["Title"] = "CreateStory";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>CreateStory</h1>
<div class="row">
    <div class="col-md-1">
        <label>Pic1</label>
    </div>
    <div class="col-md-8">
        <input type="file" accept="image/*" class="form-control" />
    </div>
    <div class="col-md-3">
        <a class="btn btn-outline-dark" asp-area="" asp-controller="Bank" asp-action="GetImagesPartial" data-toggle="modal" data-target="#myModal" id="sel">Select from image bank</a>
        <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div id="partial"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-1">
        <label>Pic2</label>
    </div>
    <div class="col-md-8">
        <input type="file" accept="image/*" class="form-control" />
    </div>
    <div class="col-md-3">
        <button class="btn btn-outline-dark">Select from image bank</button>
    </div>
</div>

@section Scripts{
    <script type="text/javascript">
        $(function () {
            $('#sel').click(function () {
                var route = '@Url.Action("GetImagesPartial", "Bank")';
                $('#partial').load(route);
            });

        });
    </script>

}

Модальный Частичный Вид

 @model TestApplication.Models.ViewModels.ImageBankViewModel

<div class="modal-header">
    <h2 class="modal-title">Choose</h2>
</div>
<div class="modal-body">
    @if (Model.ImagesListUrls.Any())
    {
        <table>
            @foreach (var image in Model.ImagesListUrls)
            {
                <tr>
                    <td>
                        <a asp-area="" asp-controller="Bank" asp-action="SelectImage" asp-route-image="@image" class="btn btn-light position-absolute" style="right:0">Select</a>
                        <img src="~/static/@image" class="img-thumbnail" />
                    </td>
                </tr>
            }
        </table>
    }
    else
    {
        <h5>no images exists...</h5>
    }
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-success" data-dismiss="modal">Cancel</button>
</div>

Комментарии:

1. итак … в чем вопрос, что у вас не работает?

Ответ №1:

Вы можете сохранить относительный путь к выбранному изображению во входных данных и передать их действию.

Ниже приведен пример, вы можете обратиться к нему.

Указатель

 <form asp-action="Upload" asp-controller="ImageBank"  method="post" enctype="multipart/form-data">
<div class="row">
    <div class="col-md-1">
        <label>Pic1</label>
    </div>
    <div class="col-md-8">
        <input type="file" accept="image/*" class="form-control" name="model.Image"/>
        <ul class="selectedpic">
            
        </ul>
    </div>
    <div class="col-md-3">
        <a class="btn btn-outline-dark sel">Select from image bank</a>
    </div>
    <div class="col-md-8 addedimg">
    </div>
</div>
    <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div id="partial"></div>
                </div>
            </div>
        </div>
    <button type="submit">submit</button>
</form>
@section Scripts{
    <script type="text/javascript">

    var currentsel="";
            $('body').on("click",".sel",function () {
                localStorage.setItem("currentsel",$(this).attr("class"));
                var route = '@Url.Action("GetImagesPartial", "ImageBank")';
                $("#myModal").modal("show");
                $('#partial').load(route);
            });            
            $('body').on("click",".selectbtn",function () {
                var currenttd=$(this).closest("td");
                console.log(currenttd.find("img").attr("src"))
                var classarry=localStorage.getItem("currentsel").split(" ");
                var currentsel="." classarry[classarry.length-1];
                var currentaddedimg=$(currentsel).closest(".row").find(".addedimg");
                var addsrc=currenttd.find("img").attr("src");
                if(checkisexsist(currentaddedimg,addsrc)){
                    $(currentsel).closest(".row").find(".selectedpic").append("<li>" addsrc "</li>");
                    $(currentsel).closest(".row").find(".addedimg").append("<input hidden name='selimages' value='" addsrc "'/>");
                    $("#myModal").modal("hide");
                    $('#myModal').on('hidden.bs.modal', function (e) {
                      localStorage.removeItem("currentsel");
                    });
                }else{
                    alert("has selected");
                }
                
            });
            function  checkisexsist(currentaddedimg,addsrc){
                var flag=true;
                $.each(currentaddedimg.find("input[name='selimages']"), function( index, value ) {
                 if($(value).val()==addsrc){
                      flag=false;
                 }
                });
                return flag;
            }
    </script>
}

Контроллер

 [HttpPost]
public IActionResult Upload(ImageBankViewModel model,List<string> selimages)
{
    if (ModelState.IsValid)
    {
        if (model.Image != null)
        {
            string webRootPath = _hostingEnvironment.WebRootPath;
            var path =Path.Combine(webRootPath, "static");
            if (!Directory.Exists(path))
                Directory.CreateDirectory(path);
            var extension = Path.GetExtension(model.Image.FileName);
            var newFileName = model.Type   "-"   DateTime.Now.Ticks;
            using (var filesStream = new FileStream(Path.Combine(path, newFileName   extension), FileMode.Create))
            {
                model.Image.CopyTo(filesStream);
            }
        }
        if(selimages!=nullamp; selimages.Count != 0)
        {
            string webRootPath = _hostingEnvironment.WebRootPath;
            var path = Path.Combine(webRootPath, "static");
            if (!Directory.Exists(path))
                Directory.CreateDirectory(path);
            selimages.ForEach(m =>
            {
                var newFileName = Guid.NewGuid().ToString();
                var extension = "."   m.Split(".")[m.Split(".").Length - 1];
                var oldpath =webRootPath m.Replace("/", "\");                      var newpath = Path.Combine(path, newFileName   extension);
                System.IO.File.Copy(oldpath,newpath);
            });
        }
        return RedirectToAction("Index");
    }
    ImageBankViewModel modelVM = new ImageBankViewModel()
    {
        Image = model.Image,
        ImagesListUrls = model.ImagesListUrls,
        Type = model.Type
    };

    return RedirectToAction("Index", modelVM);//Unsuccessful Upload , fix invalid model
}

_ImagesBankModal(укажите только измененное место)

 <a class="btn btn-light position-absolute selectbtn">Select</a>

Результат
введите описание изображения здесь

Метки: