html - jQuery 移动选择图像以供稍后上传

Question

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

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

Answer 1

如果您的目标手机浏览器支持文件上传输入类型和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