JS中的浏览器对象模型-DOM（二）-526互联

表单

在HTML表单中，可以上传文件的唯一控件就是<input type="file">。

当一个表单包含<input type="file">时，表单的enctype必须指定为multipart/form-data，method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。

如下面代码所示一个图片展示元素，一个图片信息显示元素，以及一个form表单。form表单包含一个文件上传元素，例如：

  <img id="test-image-preview" style="width:500px;height: 300px;"/>
  <p id="test-file-info"></p>
  <form method="post" enctype="multipart/form-data">
      <input id="test-image-file" type="file" />
  </form>

图片文件上传预览的代码如下：

  var
  fileInput = document.getElementById('test-image-file'),
  info = document.getElementById('test-file-info'),
  preview = document.getElementById('test-image-preview');
  // 监听change事件:
  fileInput.addEventListener('change', function () {
      // 清除背景图片:
      preview.setAttribute("src",null);
      // 检查文件是否选择:
      if (!fileInput.value) {
          info.innerHTML = '没有选择文件';
          return;
      }
      // 获取File引用:
      var file = fileInput.files[0];
      // 获取File信息:
      info.innerHTML = '文件: ' + file.name + '<br>' +
                      '大小: ' + file.size + '<br>' +
                      '修改: ' + file.lastModified;
      if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
          alert('不是有效的图片文件!');
          return;
      }
      // 读取文件:
      var reader = new FileReader();
      reader.onload = function(e) {
          var
              data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'  
              preview.src  = data;          
      };
      // 以DataURL的形式读取文件:
      reader.readAsDataURL(file);
  });

文件上传对象fileInput，它的files属性返回的是一个文件数组。上传的第一个文件是fileInput.files[0]。

使用FileReader对象读取文件，将读取结果赋值给img的src属性。

绘图

Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。

一个Canvas定义了一个指定尺寸的矩形框，在这个范围内我们可以随意绘制：

 <canvas id="test-canvas" width="300" height="200"></canvas>

生成画图环境

  canvas = document.getElementById('test-canvas');
  var ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, 200, 200); // 擦除(0,0)位置大小为200x200的矩形，擦除的意思是把该区域变为透明
  ctx.fillStyle = '#dddddd'; // 设置颜色
  ctx.fillRect(10, 10, 130, 130); // 把(10,10)位置大小为130x130的矩形涂色

上述代码中的ctx是一个绘图环境。通过绘图环境，设置绘图区域，绘制颜色，绘制矩形区域。

在绘图环境中，还可以利用path绘制复杂路径

  // 利用Path绘制复杂路径:
  var path=new Path2D();
  path.arc(75, 75, 50, 0, Math.PI*2, true);
  path.moveTo(110,75);
  path.arc(75, 75, 35, 0, Math.PI, false);
  path.moveTo(65, 65);
  path.arc(60, 65, 5, 0, Math.PI*2, true);
  path.moveTo(95, 65);
  path.arc(90, 65, 5, 0, Math.PI*2, true);
  ctx.strokeStyle = '#ee00ff';   //路径颜色
  ctx.stroke(path);     //绘制路径

绘制文本

  ctx.shadowOffsetX = 2;
  ctx.shadowOffsetY = 2;
  ctx.shadowBlur = 2;
  ctx.shadowColor = '#666666';
  ctx.font = '24px Arial';
  ctx.fillStyle = '#333333';
  ctx.fillText('带阴影的文字', 150, 40);

文章同时发表在：码农编程网欢迎访问

本节重点：

表单的文件类型；
文件的读取、使用；
创建画布，获取绘制环境；
利用绘制环境，通过path对象可以绘制复杂路径；
利用绘制环境，绘制文本。