Question

我正试着在网站上使用所选图像。

假设我有一个简单的网站，让用户可以使用以下方式从系统中选择图像：

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

然后在JavaScript中我可以这样做以获取文件：

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

问题：

1）我现在可以使用userImage吗？比如在画布上绘制它，还是我需要先将它上传到网站服务器？

2）如果我使用图片，网站每次使用时都必须上传，还是留在内存中？

3）我如何知道图像何时可以使用？（出于同样的原因，所有图像都应该在开始之前预先加载到画布上）

非常感谢你的帮助:)。

后续

感谢您的回答。因此看起来它可能在html5中但尚未得到普遍支持。

Answer 1

在HTML4中，这是不可能的，但在HTML5中，您应该能够使用W3 File 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。

Answer 2

1）您无法打开或修改图像，因为客户端脚本是在浏览器沙箱中执行的。如果脚本可以访问文件系统或用户文件，那将是一个安全问题

2）不，浏览器将自己逐块发送到远程服务器

3）见第1项：）

理解<input type =“file”/>

2 个答案: