下面是我用來將用戶在模式中輸入的特定輸入值添加到使用 JQuery 的表中的代碼，但是我正在努力將圖像輸入到表中，用戶將使用文件選擇他們想要的圖像使用 的 ID 的表單輸入#insert-image。這是我到目前為止不起作用的代碼：$("#btnAdd").on('click', function() { if ($("#insert-image").val() !== '' && $("#insert-name").val() !== '' && $("#insert-surname").val() !== '') { var imagePrep = $("#insert-image").val().replace(/C:\\fakepath\\/i, ''); let row = '<tr> <td>' + "image" + '</td> <td>' + $("#insert-name").val() + '</td> <td>' + $("#insert-surname").val() + '</td> <td>' + "edit" + '</td> <td>' + "delete" + '</td> </tr>' $('tbody').append(row); $('td:contains("image")').html("<img src="images/imagePrep" alt="selected-image">").addClass("text-center"); $('td:contains("edit")').html("<i class='fas fa-edit'></i>").addClass("text-center edit edit:hover") $('td:contains("delete")').html("<i class='far fa-trash-alt'></i>").addClass("text-center delete delete:hover").attr("id", "btnDelete").on('click', function() { $(this).parent('tr').remove(); }); }});所以基本上有問題的行是這樣的：$('td:contains("image")').html("<img src="images/imagePrep" alt="selected-image">").addClass("text-center");任何幫助將非常感激。
2 回答
慕斯709654
TA貢獻(xiàn)1840條經(jīng)驗 獲得超5個贊
您可以添加事件偵聽器來偵聽在 HTMLinput元素上選擇圖像后觸發(fā)的事件。
選擇圖像后，您可以讀取它的數(shù)據(jù)并將其渲染到客戶端：
function readImage(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (evt) {
$('td:contains("image")').find('img').attr('src', evt.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
將您綁定input到上述函數(shù)將更改位于 下的元素src的屬性。imgtd:contains("image")
叮當(dāng)貓咪
TA貢獻(xiàn)1776條經(jīng)驗 獲得超12個贊
我所要做的就是修復(fù)引號，以便將imagePrep變量添加到tag.
這是更正后的代碼：
$('td:contains("image")').html("<img src=" + imagePrep + " alt='selected-image'>").addClass("text-center");- 2 回答
- 0 關(guān)注
- 180 瀏覽
添加回答
舉報
0/150
提交
取消