image upload with php and javascript?

Question

so so new at this and are trying to get a schooljob done, but I have got stuck..

This code is going to work like this. a user is going to be able to upload images, it will be stored in a database, a thumbnail is to be shown on the site and will be enlarged onclick.

my question. I get the picture to show on the page, but how do I make it as thumbnail? JQuery? Fancybox? I havn´t gotten the hang of how to implement it. Please help!

Current code is:

<script type='text/javascript'>

function main()
{
var inputFileToLoad = document.createElement("input");
inputFileToLoad.type = "file";
inputFileToLoad.id = "inputFileToLoad";
document.body.appendChild(inputFileToLoad);

var buttonLoadFile = document.createElement("button");
buttonLoadFile.onclick = loadImageFileAsURL;
buttonLoadFile.textContent = "Load Selected File";
document.body.appendChild(buttonLoadFile);
}


function loadImageFileAsURL()
{
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0)
{
    var fileToLoad = filesSelected[0];

    if (fileToLoad.type.match("image.*"))
    {
        var fileReader = new FileReader();
        fileReader.onload = function(fileLoadedEvent) 
        {
            var imageLoaded = document.createElement("img");
            imageLoaded.src = fileLoadedEvent.target.result;
            document.body.appendChild(imageLoaded);
        };
        fileReader.readAsDataURL(fileToLoad);
    }
 }
 }

 main();

 </script>

 </body>
 </html>

Answer 1

If you only have a copy of the image (the original), then you can adjust the image size with CSS Dimension Properties . This question shows how to create a thumbnail gallery.

Answer 2

No php, no fancybox, but this works:
insert the following into the body:
<div id="div1">
<img id="img1" height="100px" width="100px" />
</div>
replace the following 4 lines:
// var imageLoaded = document.createElement("img");
// imageLoaded.src = fileLoadedEvent.target.result;
// document.body.appendChild(imageLoaded);
// };
with the following 2 lines:
document.getElementById("img1").src = fileLoadedEvent.target.result;
}