HTML 网页是否能访问手机设备的联系人列表和SD卡文件

在本文中，我们将介绍HTML网页是否能访问手机设备的联系人列表和SD卡文件的问题。对于许多网页开发者和用户来说，这是一个有趣且重要的问题。我们将通过介绍HTML5的新特性，以及使用JavaScript的方法来访问手机设备的联系人列表和SD卡文件。

阅读更多：HTML 教程

什么是HTML5？

HTML5是最新的HTML标准，它引入了许多新的特性和API，使网页开发更加强大和灵活。其中一些新特性允许网页直接与用户的手机设备进行交互，例如访问联系人列表和SD卡文件。

访问手机设备的联系人列表

在HTML5中，使用新的联系人API可以访问用户的联系人列表。这个API提供了获取联系人信息的方法，例如姓名、电话号码、电子邮件等。在用户授权的情况下，网页可以获取用户的联系人列表并进行操作。

下面是一个简单的例子，展示了如何通过HTML5的联系人API获取用户的联系人姓名和电话号码：

<button onclick="getContacts()">获取联系人</button>

<script>
function getContacts() {
  if ('contacts' in navigator) {
    navigator.contacts.pickContact(function(contact){
      var name = contact.name;
      var phoneNumber = contact.phoneNumbers[0].value;
      alert("联系人姓名：" + name + "\n手机号码：" + phoneNumber);
    });
  } else {
    alert("无法访问联系人信息");
  }
}
</script>

通过点击按钮，用户可以选择一个联系人，并弹出一个对话框显示联系人的姓名和电话号码。

需要注意的是，访问联系人列表需要用户的授权。在用户第一次访问页面时，浏览器会提示用户是否允许网页访问其联系人信息。如果用户同意，网页将能够访问联系人列表，否则将无法获取。

访问手机设备的SD卡文件

HTML5还提供了File API，使网页能够访问用户手机设备上的文件，包括SD卡上的文件。

通过以下的HTML代码，我们可以创建一个文件选择器，并获取用户所选择的文件：

<input type="file" id="file" accept="image/*">

<script>
var fileInput = document.getElementById('file');

fileInput.addEventListener('change', function(e) {
  var file = fileInput.files[0];

  if (file) {
    var reader = new FileReader();

    reader.onload = function(e) {
      var image = new Image();
      image.src = e.target.result;

      document.body.appendChild(image);
    };

    reader.readAsDataURL(file);
  }
});
</script>