Simple Jquery Plugin: Javascript Upload and Display Image

Create Only index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Upload image and Display</title>
<style>
body {
 background:#333;
}
</style>
</head>
<body>
<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(".*"))
        {
            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>

Thursday, 20 August 2015

Javascript Upload and Display Image

Create Only index.html

No comments:

Post a Comment