javascript - 我如何使用“popover”来显示从输入文件获取的放大图像?(jQuery/引导程序)
问题描述
目前,我有这个程序,它要求用户输入几个输入(使用模式输入),其中一个输入是文件类型,仅限于图像。所有输入都显示在动态表中。我需要能够在将鼠标悬停在表格上时放大表格内的图像(鼠标悬停)。这是一个示例,说明工作时的外观;
下面是我的 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'
})
});
如果有人对我如何能够将上述功能与我的代码结合使用有任何想法,我将不胜感激!
解决方案
推荐阅读
- java - OjAlgo库中是否有任何API getCovariance的奇异值分解
- database - 无法将运行 PostgreSQL 数据库引擎的数据库实例连接到 pgadmin4
- html - 获取 url 参数以处理通用视图
- r - R:在具有相同标签的更新菜单中绘制多个参数
- node.js - 在快速功能路线中抛出错误
- python - 使用 Python 抓取天空影院列表
- reactjs - 从父组件更改反应钩子状态
- html - 想要转换一个 html 和 css 文件,只需一个 html 文件,每个标签中都包含 css
- python - 相同输入 Keras 的不同训练和验证结果
- laravel - Laravel 任务调度与多个 kernel.php 类似文件