使用< input type =“file”>读取本地文件 [英] Reading local files with <input type="file">?

问题描述

我已经看到一些演示，莫西亚人将照片放入一个保管箱，然后在浏览器中本地编辑。但现在我找不到演示，我需要加载图像到我的html，然后用canvas元素编辑它们，然后上传到服务器。我认为有办法做到这一点，但我找不到任何好的解释。
基本上，我需要在我的客户端计算机上拍摄照片，并将其插入到画布元素中，而不会触摸服务器。
任何帮助将不胜感激。

解决方案

这是新的 File API 。我已经完成了几个File API示例，其中可能有用的其他StackOverflow问题的答案：

• HTML5文件API以文本和二进制形式读取


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


• 如何知道使用javascript上传的图像的大小？

第二个，特别是显示将本地图像文件加载到 img 元素中，您可以使用 canvas轻松使用/ code>。

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

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.

解决方案

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 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 img element, which you could readily use with a 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.

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