Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am adding values (Product name, Price, Quantity, and image). If I click on add button then the table is showing all the values. But I want to display an image instead of an image name in the table. Here is the code of this. Can anyone tell me what should I use on

output.src = URL.createObjectURL(event.target.files[0]);
JavaScript
var loadFile1 = function(event) {
    var output = document.getElementById('output1');
    output.src = URL.createObjectURL(event.target.files[0]);
    output.onload = function() {
      URL.revokeObjectURL(output.src)
    }
  }

function addOnClick() {
    var first = document.getElementById('first').value;
    var output1 = document.getElementById('img').files[0].name;
    var second = document.getElementById('second').value;
    var third = document.getElementById('third').value;
    var forth = document.getElementById('forth').value;


    if (first && output1 && second && third && forth) {
        let id = showtable.length + 1;
        showtable.push({ first: first, output1: output1, second: second, third: third, forth: forth, id: id })
        displayTableData();
        clearItems();
    }
}


What I have tried:

I have tried HTML, CSS and Javascript
Posted
Updated 28-Nov-22 23:18pm
v2
Comments
Richard Deeming 29-Nov-22 5:20am    
That appears to be the correct code to display an image from a file selected in an <input type="file">:
Using files from web applications - Web APIs | MDN[^]

How is that function called, and what precisely is the problem?
Member 15627495 29-Nov-22 6:47am    
you have to rewrite the 'src="image path" ' to change the image

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900