Hình ảnh lựa chọn di động của jQuery để tải lên sau này

Question

Tôi đang xây dựng một ứng dụng web di động nhỏ sử dụng JQuery Mobile. Bây giờ tôi muốn chọn một hình ảnh trên điện thoại và nhận thông tin về nó để tôi có thể tải nó lên sau từ ứng dụng. Đây có phải là ở tất cả có thể?

Tôi có thể đang ở trong tình huống ngoại tuyến và vẫn có thể chọn hình ảnh tôi muốn tải lên.

Answer 1

Nếu trình duyệt của điện thoại mục tiêu của bạn có hỗ trợ file upload input type và FileAPI (ví dụ như iOS 6.0 Safari)

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

sau đó bạn có thể cho người dùng của bạn chọn một tập tin hiện có, hoặc thậm chí sử dụng máy ảnh để chụp, và đọc một số thuộc tính của tệp hình ảnh (tên tệp, kích thước, loại, ngày sửa đổi).

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

Bạn cũng có thể xem trước tệp đã chọn bằng cách sử dụng 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); 
    } 
} 

đây đang làm việc jsFiddle