Как я могу использовать «popover» для отображения увеличенного изображения, полученного из входного файла? (JQuery / bootstrap) - PullRequest
Новая
       12

Как я могу использовать «popover» для отображения увеличенного изображения, полученного из входного файла? (JQuery / bootstrap)

1 голос
/ 08 марта 2020

В настоящее время у меня есть эта программа, которая запрашивает у пользователя пару входов (введенных с использованием модального режима), один из входов имеет тип файла, ограниченный только изображениями. Все входы показаны в динамической таблице c. Мне нужно иметь возможность увеличить изображение в таблице при наведении на него (наведение мыши). Вот пример того, как это должно выглядеть при работе:

enter image description here

ниже мой jQuery для добавления входных данных к HTML таблица: 

//function that adds input values to the table
function addToTable() {
  //add tbody tag if one is not present
  if($("#inputTable tBody").length == 0) {
    $("#inputTable").append("<tbody></tbody>");
  }

  $(function() {
    $('#insertImage').on('change', function()
    {
      var filePath = $(this).val();
      console.log(filePath);
    });
  });

var imageLocation = $("#insertImage").val().replace(/C:\\fakepath\\/i, "images/");

  //append inputs to the Table
  $("#inputTable tbody").append(
    "<tr>" +
      "<td>" + "<img src=" + imageLocation + " class=image" + ">" + "</td>" +
      "<td>" + $("#addName").val() + "</td>" +
      "<td>" + $("#addSurname").val() + "</td>" +
      "<td>" +
        "<button type='button' " +
          "class='btn'><i class='fas fa-user-edit' id='pencilIcon'></i></button>" +
      "<td>" +
        "<button type='button' " +
          "onclick='openModal(); deleteData(this);'" +
          "class='btn'><i class='fas fa-dumpster' id='dumpsterIcon'></i></button>" +
        "</button>" +
      "</td>" +
    "</tr>"
  );
}

Ниже приведен ввод для запроса изображения (HTML): 

<div class="form-group">
                <label for="insertImage">Insert Image</label>
                <input type="file" class="form-control-file" data-toggle="popover" data-html="true" data-placement="bottom" name="insertImage" id="insertImage" accept="image/x-png,image/gif,image/jpeg" aria-describedby="inputHelp">
              </div>

Вот функция jQuery, которую я планировал использовать, чтобы заставить работать этот поповер : 

$(document).ready(function(){
     $('[data-toggle="popover"]').popover({
          //trigger: 'focus',
          trigger: 'hover',
          html: true,
          content: function () {
                return '<img class="img-fluid" src="'+$(this).data('img') + '" />';
          },
          title: 'Toolbox'
    }) 
});

Если у кого-то есть идеи о том, как я могу использовать вышеуказанную функцию для работы с моим кодом, я очень признателен за это!

...