Question

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

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

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

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

1 个答案: