jQuery mobile select image for later upload

Question

I'm building a small mobile web application using JQuery Mobile. Now I want to select an image on the phone and get information about it so I can upload it later from the app. Is this at all possible?

I might be in an offline situation and should still be able to select a image I want to upload.

Answer 1

If your target phone's browser supports file upload input type and FileAPI (e.g. iOS 6.0 Safari)

<input type="file"  name="image" accept="image/*" capture>

then you can let your user pick an existing file, or even use camera to take a shot, and read some attributes of an image file (file name, size, type, modification date).

$("input[type=file]").change(function(){
    var file = $("input[type=file]")[0].files[0];
    alert(file.name + "\n" +
          file.type + "\n" + 
          file.size + "\n" + 
          file.lastModifiedDate);
});

You can also make a preview of a chosen file using FileReader.

<div id="preview"></div>

displayAsImage3(file, "preview");

function displayAsImage3(file, containerid) {
    if (typeof FileReader !== "undefined") {
        var container = document.getElementById(containerid),
            img = document.createElement("img"),
            reader;
        container.appendChild(img);
        reader = new FileReader();
        reader.onload = (function (theImg) {
            return function (evt) {
                theImg.src = evt.target.result;
            };
        }(img));
        reader.readAsDataURL(file);
    }
}

Here is working jsFiddle