理解(Understanding <input type=“file”>)

我想围绕我的头，并在网站中使用所选图像。

比方说，我有一个简单的网站，让用户使用他们的系统中选择一个图像：

<input type="file" id="userImage">

然后在JavaScript我能做到这一点，以获得文件：

var userImage = document.getElementById('#userImage').files[0];

问题：

1）我现在可以用userImage？例如，绘制它在画布上，或者我需要首先将它上传到网站的服务器？

2）如果我使用的图像，该网站是否具有上传它的每次我使用它，或者它留在记忆？

3）我怎么知道什么时候该图像是准备使用？（出于同样的原因所有图像应该在一开始被预装在画布上绘制之前）

非常感谢你的帮助：）

跟进

谢谢您的回答。所以它看起来是在HTML5可能的，但还没有得到普遍支持。

Answer 1:

在HTML4这是不可能的，但在HTML5中，你应该能够访问使用本地文件W3文件API 。不过，我不知道什么时候（以及如何），它会通过不同的浏览器的支持。在我的本地的Firefox 14.0.1，下面的代码工作，并产生所选文件的二进制数据：

var reader = new FileReader()
reader.readAsDataURL(document.getElementById('userImage').files[0])
alert(reader.result)

下页描绘了本地图像到画布上：

<html>
  <body>
    <script type="text/javascript">
      function doIt() {
        var reader = new FileReader();
        reader.onload = (function(e) {
            var img = new Image();
            img.src = e.target.result;
            var c = document.getElementById("canvas");
            var ctx = c.getContext("2d");
            ctx.drawImage(img,10,10);
          }
        );
        reader.readAsDataURL(document.getElementById('userImage').files[0]);
      }
    </script>

    <input type="file" id="userImage" />
    <button onclick="doIt()">Render Image</button><br/>
    <canvas id="canvas" style="border: 1px solid black; height: 400px; width: 400px;"/>
  </body>
</html>

也许你应该考虑读2 。