Javascript 使用 <input type="file"> 读取本地文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5872815/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reading local files with <input type="file">?
提问by gkaykck
I have seen some demos where mozilla guys dropped a photo into a dropbox and then edited it locally in the browser. But now i cannot find out the demo and i need to load images to my html, then edit them with canvas element, then upload them to server. I think there is a way of doing this but i cannot find any good explanation. Basically i need to take a picture on my clients computer and insert it into a canvas element without touching the server. Any help will be appreciated.
我看过一些演示，其中 mozilla 人员将照片放入保管箱，然后在浏览器中进行本地编辑。但是现在我找不到演示，我需要将图像加载到我的 html，然后使用 canvas 元素编辑它们，然后将它们上传到服务器。我认为有一种方法可以做到这一点，但我找不到任何好的解释。基本上我需要在我的客户端计算机上拍照并将其插入画布元素而不接触服务器。任何帮助将不胜感激。
回答by T.J. Crowder
It's the new File APIfrom the W3C (which Mozilla had a lot to do with). I've done a couple of File API examples in answers to other StackOverflow questions that may be useful:
它是来自 W3C的新文件 API（Mozilla 与它有很大关系）。我在回答其他可能有用的 StackOverflow 问题时做了几个文件 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?
That second one, in particular, shows loading a local image file into an imgelement, which you could readily use with a canvas.
特别是第二个，显示将本地图像文件加载到img元素中，您可以轻松地将其与canvas.
If you want the drag-and-drop aspect, you might also check out the HTML5 Drag and Drop stuff; related article: Google Turns to HTML5 for Gmail's New Drag-and-Drop Attachments.
如果您想要拖放方面，您还可以查看 HTML5拖放内容；相关文章：Google 为 Gmail 的新拖放附件转而使用 HTML5。
