GGB+JS样例8 - 用按钮选择GGB文件

摘要: 本文介绍基于GeoGebra和JavaScript的小程序样例 - 用按钮选择本地GGB文件。

未选择文件

网页代码:


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>用按钮选择本地GGB文件</title>
  <style type="text/css">
    input {
      display: inline-block;
      width: 100px;
      height: 24px;
      opacity: 0;
    }
    button {
      width: 100px;
      height: 26px;
      margin-left: -102px;
    }
  </style>
</head>
<body>
<input type="file" accept=".ggb" onchange="fileSelected(this.files[0])">
<button>选择GGB文件</button>
<span id="title">未选择文件</span>
<div id="applet"></div>
<script src="../GeoGebra/deployggb.js"></script>
<script>
  var applet = new GGBApplet({});
  applet.setHTML5Codebase('../GeoGebra/HTML5/5.0/web3d/', true);
  window.onload = function() {
    applet.inject('applet', 'html5');
  };
  function fileSelected(file) {
    var reader = new FileReader();
    if (file) {
      document.getElementById('title').innerText = file.name;
      reader.readAsDataURL(file);
      reader.onload = function(e) {
        ggbApplet.setBase64(e.target.result);
      };
    }
  }
</script>
</body>
</html>

分享到：更多