使用 <input type="file"> 读取本地文件？ [复制]

【问题标题】：Reading local files with <input type="file">? [duplicate]使用 <input type="file"> 读取本地文件？ [复制]
【发布时间】：2011-08-17 21:16:04
【问题描述】：

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

【问题讨论】：

标签： javascript html dom file-upload canvas

【解决方案1】：

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

第二个特别显示了将本地图像文件加载到 img 元素中，您可以轻松地将其与 canvas 一起使用。

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

【讨论】：