html - jQuery Mobile 选择图片供稍后上传

Question

我正在使用 JQuery Mobile 构建一个小型移动网络应用程序.现在我想在手机上选择一张图片并获取有关它的信息，以便稍后从应用程序上传它。这有可能吗？

我可能处于离线状态，但应该仍然可以选择我要上传的图片。

Answer 1

如果你的目标手机的浏览器支持file upload input type和 FileAPI (例如 iOS 6.0 Safari)

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

然后您可以让您的用户选择一个现有的文件，甚至可以使用相机拍照，并读取图像文件的一些属性(文件名、大小、类型、修改日期)。

$("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);
});

您还可以使用 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);
    }
}

这里正在工作 jsFiddle