理解<input type="file">

Question

理解<input type="file">

7

我希望能够理解并使用在网站中选择图像的相关技术。假设我有一个简单的网站，允许用户使用以下方法从其系统中选择图像：

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

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

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

问题:

1) 我现在可以使用userImage吗? 比如在画布上绘制它，或者我需要先将它上传到网站服务器上?

2) 如果我使用这个图像，网站每次使用它时是否都需要上传它，还是它会一直在内存中?

3) 我如何知道图像准备好了可以使用？(出于同样的原因，所有图像在绘制到画布之前都应该预加载)

非常感谢你的帮助 :)

后续

谢谢你的答案。看起来在HTML5中是可能的，但尚未得到普遍支持。

- Jamie Fearon

2个回答

-3

1)由于客户端脚本在浏览器沙盒中执行，因此您无法打开或修改图像。如果脚本可以访问文件系统或用户文件，则会存在安全问题。

2）不，浏览器会自行将文件逐块发送到远程服务器。

3）请参见第1项：）

- ruX

对于那些给这个答案点踩的人：在当时还没有从客户端访问文件的支持。 - ruX

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tbl · Accepted Answer

在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。