使用< input type =" file"&gt ;?阅读本地文件 [英] Reading local files with <input type="file">?

问题描述

我看过一些演示，mozilla的用户将照片放入了Dropbox，然后在浏览器中进行了本地编辑。但现在我找不到演示，我需要加载图像到我的HTML，然后使用canvas元素编辑它们，然后将它们上传到服务器。我认为有一种方法这样做，但我找不到任何好的解释。
基本上，我需要在我的客户端计算机上的图片，并将其插入到一个画布元素，而不用触摸服务器。

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.

推荐答案

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

It's the new File API from 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:

• HTML5文件API读为文本和二进制


• 在文件上传期间使用Javascript获取图像尺寸

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

That second one, in particular, shows loading a local image file into an img element, which you could readily use with a canvas.

如果您想要拖放方面，还可以查看HTML5 拖放东西;相关文章： Google转换为HTML5的Gmail新的拖放附件 。

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.

这篇关于使用< input type =" file"&gt ;?阅读本地文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！