Question

So basically all I want to do is a basic image uploading page. When the user fills out a form they submit a file either from their computer or from a URL then the image gets stored on the server.

I want to then display the images on a HTML page. I already have the code to dynamically create the divs that would hold the uploaded content.

function AddTiles() {
    var mydiv = document.createElement("div");
    mydiv.setAttribute("id", "mydiv");
    mydiv.setAttribute("class", "tiles");
    mainContent.appendChild(mydiv);
}

But whenever you upload the image the page refreshes, and then the divs would no longer be there to place the image in. So I want to save the image to a database instead, and then on page load, read through the database and generate the html content and then display the images.

So if there were 4 images in your database, then the program would create 4 div tags and put each image in its respective div tag.

Also, I just need the code to read from the database and create the html content on load. I can create the database and store the images with no problem.

Answer 1

If you are going to read and output information stored in a database, you might as well generate the HTML content on the server-side (PHP) without using JavaScript i.e. echo "<img src='$url' />".

You can also read PHP MysQL Select tutorial for more information on retrieving data from your database.