用<input type =“file”>读取本地文件？

Question

我已经看到一些演示，其中mozilla家伙将照片放入收存箱，然后在浏览器中进行本地编辑。但现在我无法找到演示，我需要将图像加载到我的html，然后用canvas元素编辑它们，然后将它们上传到服务器。我认为有这样做的方法，但我找不到任何好的解释。 基本上我需要在我的客户端计算机上拍摄一张照片，并将其插入到画布元素中，而无需触摸服务器。 任何帮助将不胜感激。

Answer 1

这是来自W3C（与Mozilla有很多关系）的新的File API。我已经做了几个文件API的例子在回答其他问题StackOverflow的可能有用：

• HTML5 File API read as text and binary
• Get Image dimensions using Javascript during file upload
• How to know the size of the image to be uploaded with javascript?

那第二个，特别节目将一个本地图像文件加载到一个img元素中，您可以使用它随时使用canvas。

如果你想拖放方面，你也可以看看HTML5 Drag and Drop stuff;相关文章：Google Turns to HTML5 for Gmail’s New Drag-and-Drop Attachments。