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

Question

我见过一些演示，其中mozilla的人将照片放入Dropbox然后在浏览器中进行本地编辑。但现在我找不到演示，我需要将图像加载到我的html，然后用canvas元素编辑它们，然后将它们上传到服务器。我认为有一种方法可以做到这一点，但我找不到任何好的解释。 基本上我需要在我的客户端计算机上拍照并将其插入到画布元素中而不触及服务器。 任何帮助将不胜感激。

Answer 1

这是来自W3C的新File API（Mozilla与之有很多关系）。我已经在其他可能有用的StackOverflow问题的答案中完成了几个File API示例：

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