jQuery手機選擇圖像供以後上傳

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