html5 – jQuery手机选择图像供以后上传

前端之家收集整理的这篇文章主要介绍了html5 – jQuery手机选择图像供以后上传前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用 JQuery Mobile构建一个小型移动Web应用程序.现在我想在手机上选择一个图像,并获取有关信息,以便稍后从应用程序上传.这是可以吗

我可能处于离线情况,仍然可以选择我想要上传的图像.

解决方法

如果目标手机的浏览器支持 file upload input typeFileAPI(例如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

猜你在找的HTML5相关文章