1

I have a metro app in WinJS which selects images by using an input file

<body>
    <div id="content">
        <h1>e-Camera</h1>
        <br />
        <button              id = "imageCaptureButton">Tomar Foto</button>
        <input type = "file" id = "uploadCaptureInputFile" accept="image/*" />
        <br />
        <button             id = "uploadCaptureButton">Subir Foto</button>
        <br />
        <br />

        <div id="result"></div>
    </div>

</body>

I want to print on my div <div id="result"></div> inside the result of the picture

this is my javascript file

function getDomElements() {
        _imageCaptureButton     = document.querySelector("#imageCaptureButton");
        _uploadCaptureInputFile = document.querySelector("#uploadCaptureInputFile");
        _uploadCaptureButton    = document.querySelector("#uploadCaptureButton");
        _divPicture             = document.querySelector("#result");
    }

function wireEventHandlers() {
        _uploadCaptureInputFile.addEventListener("change", loadPictureFromFile, false);
    }

app.onloaded = function () {
        getDomElements();
        wireEventHandlers();
        _uploadCaptureButton.disabled = true;
    }

and the method which is designed for loading the image:

EDIT: thanks to jakerella and several modifications, here it is the anwser:

function loadPictureFromFile(event) {

    var selectedFile    = event.target.files[0];
    var reader          = new FileReader();

    imageElement = document.createElement("img");               //creates <img id="img"> element
    imageElement.title = selectedFile.name;                     //set photo's name

    reader.onload = function (event) {
        imageElement.setAttribute("src", event.target.result);  //picture's source
        _divPicture.appendChild(imageElement);                  //Add's <img> element to Div element
    };

    reader.readAsDataURL(selectedFile);
}
Jesus
  • 8,456
  • 4
  • 28
  • 40
  • 1
    Sorry, but I don't see a question here... are you asking how to load a file from an input? If so, maybe this answer will help: http://stackoverflow.com/a/16153675/1985406 – Jordan Kasper Dec 11 '13 at 17:32
  • thats the answer, I wanted a method for loading a picture inside a div by using input file for selecting it thanks!!!! – Jesus Dec 11 '13 at 17:46
  • 2
    Note that loading up an entire image file to display in a smaller space incurs greater memory overhead than necessary. If you can obtain a StorageFile object for the filename, then you can use StorageFile.getThumbnailAsync or getScaledImageAsThumbnailAsync (Windows 8.1), and display that result. A thumbnail can be passed to URL.createObjectURL and the return value from that assigned to an img.src. This typically performs faster as well because thumbnails are cached by the system indexer. – Kraig Brockschmidt - MSFT Dec 11 '13 at 18:14
  • I need image full quality because I want to send it over a webservice :) – Jesus Dec 11 '13 at 18:32

0 Answers0